new lazyload and FontAwesome, more updates

_includes/footer.html

@@ -27,9 +27,17 @@
 <script src="{{ "/js/jquery.validate.js" | prepend: site.baseurl }}"></script>
 <!-- <script src="{{ "/bower_components/countto/jquery.countTo.js" | prepend: site.baseurl }}"></script> -->
 <script src="{{ "/bower_components/appear/jquery.appear.js" | prepend: site.baseurl }}"></script>
+<script src="{{ "/bower_components/modernizr/modernizr.js" | prepend: site.baseurl }}"></script>
 <script src="{{ "/js/app.js" | prepend: site.baseurl }}"></script>
 <script src="{{ "/js/svg.js" | prepend: site.baseurl }}"></script>
 <script src="{{ "/js/cookie.js" | prepend: site.baseurl }}"></script>
+<script src="{{ "/js/lazyload.min.js" | prepend: site.baseurl }}"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_includes/head.html

@@ -38,7 +38,7 @@
   <meta name="twitter:image:src" content="https://ura.design/{{ page.images }}" />
   
   <link rel="stylesheet" href="{{ "/css/app.css" | prepend: site.baseurl }}">
-  <link href="{{ "/fonts/overpass/overpass.css" | prepend: site.baseurl }}" rel="stylesheet">
+  <link rel="stylesheet" href="{{ "/fonts/overpass/overpass.css" | prepend: site.baseurl }}">
   <link rel="stylesheet" href="{{ "/css/superslides.css" | prepend: site.baseurl }}"/>
   <link rel="stylesheet" href="{{ "/css/slick-theme.css" | prepend: site.baseurl }}"/>
   <link rel="stylesheet" href="{{ "/css/slick.css" | prepend: site.baseurl }}"/>
@@ -48,9 +48,7 @@
   <link rel="stylesheet" href="{{ "/css/fontawesome-all.css" | prepend: site.baseurl }}"/>
   <link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}"/>
   <link rel="stylesheet" href="{{ "/css/responsive.css" | prepend: site.baseurl }}"/>
-
-  <script src="{{ "/bower_components/modernizr/modernizr.js" | prepend: site.baseurl }}"></script>
-  
+    
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
 </head>

_site/2017/01/03/Hello-open-source-design-world.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/hello_world.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2017/01/03/Hello-open-source-design-world.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -231,9 +229,17 @@ This will be our own space in the big ocean of chaotic, decentralized, beautiful
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.html

@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/ura-wikispeech.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -250,9 +248,17 @@ Help us hep floss initiatives communicate better with their audiences through op
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/osd_event.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -277,9 +275,17 @@ During the presentation the participants had the opportunity to:
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2017/08/25/ura-sha-2017.html

@@ -37,7 +37,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/sha1-thumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -47,9 +47,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2017/08/25/ura-sha-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -267,9 +265,17 @@ For those of you who haven’t heard of SHA before: this is an outdoor hacker ca
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/01/09/ura-work-week-november-2017.html

@@ -37,7 +37,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/work_week_2017.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -47,9 +47,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/01/09/ura-work-week-november-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -250,9 +248,17 @@ We had our first working week this November where all gathered in the city of Ti
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/01/15/chaos-communication-congress-2017.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/34c3_thumb.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/01/15/chaos-communication-congress-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -248,9 +246,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/02/09/ura-fosdem-2018.html

@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/Elio-FOSDEM2018-thumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/02/09/ura-fosdem-2018.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -265,9 +263,17 @@ Looking forward at the next edition with more interesting projects and more <str
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/02/23/inkscape-workshop-tirana.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/Inkscape-Workshop-1-thumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/02/23/inkscape-workshop-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -270,9 +268,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/03/12/ura-now-part-open-tech-funds-usability-lab.html

@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/home-banner.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/03/12/ura-now-part-open-tech-funds-usability-lab.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -265,9 +263,17 @@ Unfortunately, few of these software­ development teams have the capacity or ex
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/03/19/new-ura-website.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/website_thumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/03/19/new-ura-website.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -238,9 +236,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/03/31/introducing-cryptopayments-for-our-services.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/CryptoCurrencyThumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/03/31/introducing-cryptopayments-for-our-services.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -251,9 +249,17 @@ As you might know, a part of the project is funded by generous pledges on our Pa
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/05/31/oscal-18-we-were-there.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/OSCAL_thumbnail.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/05/31/oscal-18-we-were-there.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -259,9 +257,17 @@ This will set a solid base for the upcoming Usability Study which will shine lig
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/06/13/reproducible-builds-styleguide.html

@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/ReproducibleBuilds_thumbnail.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/06/13/reproducible-builds-styleguide.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -260,9 +258,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/06/17/welcoming-renata-uras-usability-researcher.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/Renata_Redon_thumbnail.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/06/17/welcoming-renata-uras-usability-researcher.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -258,9 +256,17 @@ potential users.</em> “</p>
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/07/02/style-guides-go-beyond-aesthetics.html

@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/osd_event.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/07/02/style-guides-go-beyond-aesthetics.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -273,9 +271,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/2018/07/05/thunderbird-style-guide.html

@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/thumb_thunderbird.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/07/05/thunderbird-style-guide.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -263,9 +261,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/404.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/404.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -202,9 +200,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/about.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/about.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -179,8 +177,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/ElioHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/ElioHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/ElioHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/ElioHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Elio Qoshi</h4>
             <p class="position">Founder &amp; Design Lead</p>
@@ -201,8 +199,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/MarianaHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/MarianaHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/MarianaHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/MarianaHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Mariana Balla</h4>
             <p class="position">Outreach</p>
@@ -223,8 +221,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/RenataHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/RenataHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/RenataHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/RenataHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Renata Gegaj</h4>
             <p class="position">Usability Researcher</p>
@@ -245,8 +243,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/BorisHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/BorisHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/BorisHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/BorisHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Boris Budini</h4>
             <p class="position">System Administrator</p>
@@ -265,8 +263,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/AnxheloHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/AnxheloHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/AnxheloHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/AnxheloHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Anxhelo Lushka</h4>
             <p class="position">Frontend &amp; Designer</p>
@@ -323,9 +321,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/blog/index.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/blog/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -191,7 +189,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/07/05/thunderbird-style-guide"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/thumb_thunderbird.png" alt="post"></a>
+            <a href="/2018/07/05/thunderbird-style-guide"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/thumb_thunderbird.png" alt="post"></a>
            
     </div>
       </div>
@@ -228,7 +226,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/07/02/style-guides-go-beyond-aesthetics"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/osd_event.png" alt="post"></a>
+            <a href="/2018/07/02/style-guides-go-beyond-aesthetics"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/osd_event.png" alt="post"></a>
            
     </div>
       </div>
@@ -265,7 +263,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/06/17/welcoming-renata-uras-usability-researcher"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/Renata_Redon_thumbnail.png" alt="post"></a>
+            <a href="/2018/06/17/welcoming-renata-uras-usability-researcher"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/Renata_Redon_thumbnail.png" alt="post"></a>
            
     </div>
       </div>
@@ -304,7 +302,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/06/13/reproducible-builds-styleguide"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/ReproducibleBuilds_thumbnail.png" alt="post"></a>
+            <a href="/2018/06/13/reproducible-builds-styleguide"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/ReproducibleBuilds_thumbnail.png" alt="post"></a>
            
     </div>
       </div>
@@ -341,7 +339,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/05/31/oscal-18-we-were-there"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/OSCAL_thumbnail.png" alt="post"></a>
+            <a href="/2018/05/31/oscal-18-we-were-there"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/OSCAL_thumbnail.png" alt="post"></a>
            
     </div>
       </div>
@@ -378,7 +376,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/03/31/introducing-cryptopayments-for-our-services"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/CryptoCurrencyThumb.jpg" alt="post"></a>
+            <a href="/2018/03/31/introducing-cryptopayments-for-our-services"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/CryptoCurrencyThumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -445,9 +443,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/blog/page2/index.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/blog/page2/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -189,7 +187,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/03/19/new-ura-website"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/website_thumb.jpg" alt="post"></a>
+            <a href="/2018/03/19/new-ura-website"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/website_thumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -228,7 +226,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/03/12/ura-now-part-open-tech-funds-usability-lab"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/home-banner.jpg" alt="post"></a>
+            <a href="/2018/03/12/ura-now-part-open-tech-funds-usability-lab"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/home-banner.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -265,7 +263,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/02/23/inkscape-workshop-tirana"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/Inkscape-Workshop-1-thumb.jpg" alt="post"></a>
+            <a href="/2018/02/23/inkscape-workshop-tirana"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/Inkscape-Workshop-1-thumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -304,7 +302,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/02/09/ura-fosdem-2018"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/Elio-FOSDEM2018-thumb.jpg" alt="post"></a>
+            <a href="/2018/02/09/ura-fosdem-2018"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/Elio-FOSDEM2018-thumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -341,7 +339,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/01/15/chaos-communication-congress-2017"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/34c3_thumb.png" alt="post"></a>
+            <a href="/2018/01/15/chaos-communication-congress-2017"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/34c3_thumb.png" alt="post"></a>
            
     </div>
       </div>
@@ -376,7 +374,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/01/09/ura-work-week-november-2017"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/work_week_2017.png" alt="post"></a>
+            <a href="/2018/01/09/ura-work-week-november-2017"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/work_week_2017.png" alt="post"></a>
            
     </div>
       </div>
@@ -445,9 +443,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/blog/page3/index.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/blog/page3/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -187,7 +185,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2017/08/25/ura-sha-2017"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/sha1-thumb.jpg" alt="post"></a>
+            <a href="/2017/08/25/ura-sha-2017"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/sha1-thumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -224,7 +222,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/osd_event.png" alt="post"></a>
+            <a href="/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/osd_event.png" alt="post"></a>
            
     </div>
       </div>
@@ -263,7 +261,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/ura-wikispeech.png" alt="post"></a>
+            <a href="/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/ura-wikispeech.png" alt="post"></a>
            
     </div>
       </div>
@@ -300,7 +298,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2017/01/03/Hello-open-source-design-world"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/hello_world.png" alt="post"></a>
+            <a href="/2017/01/03/Hello-open-source-design-world"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/hello_world.png" alt="post"></a>
            
     </div>
       </div>
@@ -367,9 +365,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/contact.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/contact.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -220,9 +218,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/events/fosdem-2017.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/fosdem-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -220,9 +218,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/events/fosdem-2018.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/fosdem-2018.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -220,9 +218,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/events/index.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -259,9 +257,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/events/oscal-2017.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/oscal-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -227,9 +225,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/events/oscal-2018.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/oscal-2018.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -225,9 +223,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/events/osd-workshop-1-in-tirana.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/osd-workshop-1-in-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -226,9 +224,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/events/osd-workshop-2-tirana.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/osd-workshop-2-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -226,9 +224,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/events/osd-workshop-3-tirana.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/osd-workshop-3-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -220,9 +218,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/feed.xml

@@ -6,8 +6,8 @@
 </description>
     <link>http://localhost:4000/</link>
     <atom:link href="http://localhost:4000/feed.xml" rel="self" type="application/rss+xml"/>
-    <pubDate>Sun, 14 Oct 2018 13:27:51 +0200</pubDate>
-    <lastBuildDate>Sun, 14 Oct 2018 13:27:51 +0200</lastBuildDate>
+    <pubDate>Sun, 14 Oct 2018 14:14:49 +0200</pubDate>
+    <lastBuildDate>Sun, 14 Oct 2018 14:14:49 +0200</lastBuildDate>
     <generator>Jekyll v3.8.4</generator>
     
       <item>

_site/index.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -225,7 +223,7 @@
   <div class="section-title">
     <div class="row">
       <div class="medium-10 medium-centered columns">
-        <img src="images/main/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
+        <img class="lazy" data-src="images/main/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
         <div class="spacing"></div>
         <h2>Design, but Open</h2>
       </div>
@@ -257,15 +255,15 @@
     <div class='large-12 columns'>
       <div class='clients'>
         
-          <div><a href="https://mozilla.org" target="blank"><img alt="" src="/images/clients/mozilla.png" width="200px" height="120px"></a></div>
+          <div><a href="https://mozilla.org" target="blank"><img class="lazy" alt="" data-src="/images/clients/mozilla.png" width="200px" height="120px"></a></div>
         
-          <div><a href="https://www.torproject.org/" target="blank"><img alt="" src="/images/clients/tor.png" width="200px" height="120px"></a></div>
+          <div><a href="https://www.torproject.org/" target="blank"><img class="lazy" alt="" data-src="/images/clients/tor.png" width="200px" height="120px"></a></div>
         
-          <div><a href="https://www.linuxfoundation.org" target="blank"><img alt="" src="/images/clients/linuxfoundation.png" width="200px" height="120px"></a></div>
+          <div><a href="https://www.linuxfoundation.org" target="blank"><img class="lazy" alt="" data-src="/images/clients/linuxfoundation.png" width="200px" height="120px"></a></div>
         
-          <div><a href="https://fsfe.org/" target="blank"><img alt="" src="/images/clients/fsfe.png" width="200px" height="120px"></a></div>
+          <div><a href="https://fsfe.org/" target="blank"><img class="lazy" alt="" data-src="/images/clients/fsfe.png" width="200px" height="120px"></a></div>
         
-          <div><a href="https://stickermule.com/" target="blank"><img alt="" src="/images/clients/stickermule.png" width="200px" height="120px"></a></div>
+          <div><a href="https://stickermule.com/" target="blank"><img class="lazy" alt="" data-src="/images/clients/stickermule.png" width="200px" height="120px"></a></div>
         
       </div>
     </div>
@@ -288,7 +286,7 @@
         <div class="quote wow slideInLeft" data-wow-delay="0.0s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="images/testimonials/jeffbeatty.png" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="images/testimonials/jeffbeatty.png" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>“The folks at Ura were very professional in learning our expectations, planning the project, and being flexible as things changed. Add to that their commitment to work in the open and it made for a wonderful experience.”</p>
@@ -300,7 +298,7 @@
         <div class="quote wow slideInLeft" data-wow-delay="0.25s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="images/testimonials/benjaminkerensa.png" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="images/testimonials/benjaminkerensa.png" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>“When looking for an identity for Glucosio we put our faith into Ura. With an unrivaled ability to bring ideas together into a fresh and modern branding experience we were really happy with the results.”</p>
@@ -315,7 +313,7 @@
         <div class="quote reverse wow slideInRight" class="wow" data-wow-delay="0.0s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="images/testimonials/justindorfman.png" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="images/testimonials/justindorfman.png" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>“Ever since 'Open Source' was coined 20 years ago, a majority of projects have lacked great design. Ura is leading the way to fill that gap of Open Source Design in the community.”</p>
@@ -327,7 +325,7 @@
         <div class="quote reverse wow slideInRight" class="wow" data-wow-delay="0.25s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="images/testimonials/simplysecure.png" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="images/testimonials/simplysecure.png" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>“Ura understood the needs of the open-source community when we worked together creating a styleguide for the Tor Project. They were able to deliver a polished result in a large, distributed volunteer organization.”</p>
@@ -357,7 +355,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/thunderbird" class="work">
-          <img src="http://localhost:4000/images/projects/tb_overview.png" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/tb_overview.png" alt="">
           <div class="info">
             <h3>Thunderbird Style Guide and Usability Study</h3>
             <p>Usability Study, Style Guide</p>
@@ -367,7 +365,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/openlabs" class="work">
-          <img src="http://localhost:4000/images/projects/openlabs_thumbnail.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/openlabs_thumbnail.jpg" alt="">
           <div class="info">
             <h3>Open Labs</h3>
             <p>Visual Identity</p>
@@ -380,7 +378,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/mozilla-l10n" class="work">
-          <img src="http://localhost:4000/images/projects/mozilla-l10n.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/mozilla-l10n.jpg" alt="">
           <div class="info">
             <h3>Mozilla L10N T-Shirts</h3>
             <p>Print</p>
@@ -390,7 +388,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/tor-style-guide" class="work">
-          <img src="http://localhost:4000/images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -403,7 +401,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/reproducible-builds" class="work">
-          <img src="http://localhost:4000/images/projects/rb_thumbnail.png" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/rb_thumbnail.png" alt="">
           <div class="info">
             <h3>Reproducible Builds Styleguide</h3>
             <p>Style Guide</p>
@@ -413,7 +411,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/enigmail" class="work">
-          <img src="http://localhost:4000/images/projects/enigmail_overview.png" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/enigmail_overview.png" alt="">
           <div class="info">
             <h3>Enigmail Rebranding</h3>
             <p>Visual Identity</p>
@@ -471,9 +469,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/jobs/frontend.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/jobs/frontend.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -249,9 +247,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/jobs/full-stack.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/jobs/full-stack.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -262,9 +260,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/jobs/index.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/jobs/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -203,9 +201,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/logobridge.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/logobridge.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -184,25 +182,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/5ycX7DrQ9MXsKi4" target="blank" class="work space">
-              <img src="/images/logobridge/32.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/32.png" alt="">
               <div class="info center">
                 <h5>Logo 32</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/eGzARsDPS7xK6i5" target="blank" class="work space">
-              <img src="/images/logobridge/31.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/31.png" alt="">
               <div class="info center">
                 <h5>Logo 31</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/DgDXMkK32nbGt9M" target="blank" class="work space">
-              <img src="/images/logobridge/30.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/30.png" alt="">
               <div class="info center">
                 <h5>Logo 30</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/Qkjq7WcB3gRpyed" target="blank" class="work space">
-              <img src="/images/logobridge/29.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/29.png" alt="">
               <div class="info center">
                 <h5>Logo 29</h5>
               </div>
@@ -214,25 +212,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/E7OC3cub9qmjL2c" target="blank" class="work space">
-              <img src="/images/logobridge/28.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/28.png" alt="">
               <div class="info center">
                 <h5>Logo 28</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AN8VJaf4BfbZeNs" target="blank" class="work space">
-              <img src="/images/logobridge/27.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/27.png" alt="">
               <div class="info center">
                 <h5>Logo 27</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/9z8jNL804itQ9rj" target="blank" class="work space">
-              <img src="/images/logobridge/26.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/26.png" alt="">
               <div class="info center">
                 <h5>Logo 26</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/NWUCaBe1sBmxMQr" target="blank" class="work space">
-              <img src="/images/logobridge/25.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/25.png" alt="">
               <div class="info center">
                 <h5>Logo 25</h5>
               </div>
@@ -244,25 +242,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/6MLHKgb7kaLvBdW" target="blank" class="work space">
-              <img src="/images/logobridge/24.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/24.png" alt="">
               <div class="info center">
                 <h5>Logo 24</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AXvYXt2gt9frtKP" target="blank" class="work space">
-              <img src="/images/logobridge/23.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/23.png" alt="">
               <div class="info center">
                 <h5>Logo 23</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/2PpGi036WDkiw3x" target="blank" class="work space">
-              <img src="/images/logobridge/22.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/22.png" alt="">
               <div class="info center">
                 <h5>Logo 22</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/nfB7kgOVRbu1DWH" target="blank" class="work space">
-            <img src="/images/logobridge/21.png" alt="">
+            <img class="lazy" data-src="/images/logobridge/21.png" alt="">
               <div class="info center">
                 <h5>Logo 21</h5>
               </div>
@@ -274,25 +272,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/uOpHJ03pFydVhnk" target="blank" class="work space">
-              <img src="/images/logobridge/20.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/20.png" alt="">
               <div class="info center">
                 <h5>Logo 20</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ug9TQ6QDG1bk9AG" target="blank" class="work space">
-              <img src="/images/logobridge/19.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/19.png" alt="">
               <div class="info center">
                 <h5>Logo 19</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AUdTz6wgkwtHCBd" target="blank" class="work space">
-              <img src="/images/logobridge/18.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/18.png" alt="">
               <div class="info center">
                 <h5>Logo 18</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/EVEChXZfCUQcO5G" target="blank" class="work space">
-              <img src="/images/logobridge/17.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/17.png" alt="">
               <div class="info center">
                 <h5>Logo 17</h5>
               </div>
@@ -304,25 +302,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/ZD71SvkYhiorZae" target="blank" class="work space">
-              <img src="/images/logobridge/16.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/16.png" alt="">
               <div class="info center">
                 <h5>Logo 16</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/vc7FKx1icMeq3QL" target="blank" class="work space">
-              <img src="/images/logobridge/15.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/15.png" alt="">
               <div class="info center">
                 <h5>Logo 15</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/SR2WegS5qin08AZ" target="blank" class="work space">
-              <img src="/images/logobridge/14.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/14.png" alt="">
               <div class="info center">
                 <h5>Logo 14</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/vy1H32n3wYudvvK" target="blank" class="work space">
-              <img src="/images/logobridge/13.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/13.png" alt="">
               <div class="info center">
                 <h5>Logo 13</h5>
               </div>
@@ -334,25 +332,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/LLcBzhPfeJYXjn6" target="blank" class="work space">
-              <img src="/images/logobridge/12.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/12.png" alt="">
               <div class="info center">
                 <h5>Logo 12</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/g07EQygQXx9AnTu" target="blank" class="work space">
-              <img src="/images/logobridge/11.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/11.png" alt="">
               <div class="info center">
                 <h5>Logo 11</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ECmitgpnrH2sene" target="blank" class="work space">
-              <img src="/images/logobridge/10.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/10.png" alt="">
               <div class="info center">
                 <h5>Logo 10</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/tkfXiEpuynDhXYV" target="blank" class="work space">
-              <img src="/images/logobridge/9.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/9.png" alt="">
               <div class="info center">
                 <h5>Logo 9</h5>
               </div>
@@ -364,25 +362,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/cVBkctDp4ApGSYC" target="blank" class="work space">
-              <img src="/images/logobridge/8.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/8.png" alt="">
               <div class="info center">
                 <h5>Logo 8</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/cxpyGtJ9xif52Kw" target="blank" class="work space">
-              <img src="/images/logobridge/7.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/7.png" alt="">
               <div class="info center">
                 <h5>Logo 7</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ramqPdYHZlaQ2u8" target="blank" class="work space">
-              <img src="/images/logobridge/6.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/6.png" alt="">
               <div class="info center">
                 <h5>Logo 6</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/eZqxXpJu6hIlqCa" target="blank" class="work space">
-              <img src="/images/logobridge/5.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/5.png" alt="">
               <div class="info center">
                 <h5>Logo 5</h5>
               </div>
@@ -394,25 +392,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/SVLtm1eF6P7LmgZ" target="blank" class="work space">
-              <img src="/images/logobridge/4.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/4.png" alt="">
               <div class="info center">
                 <h5>Logo 4</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/9ULnGadMZLiZuwl" target="blank" class="work space">
-              <img src="/images/logobridge/3.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/3.png" alt="">
               <div class="info center">
                 <h5>Logo 3</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ViMmeuvoLmXsjjF" target="blank" class="work space">
-              <img src="/images/logobridge/2.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/2.png" alt="">
               <div class="info center">
                 <h5>Logo 2</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/6zlp51kBNGogrbC" target="blank" class="work space">
-              <img src="/images/logobridge/1.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/1.png" alt="">
               <div class="info center">
                 <h5>Logo 1</h5>
               </div>
@@ -457,9 +455,17 @@ It’s a great way to kick off your open source project when you need to gather
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/portfolio-item-2.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/portfolio-item-2.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -273,9 +271,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/privacy-policy.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/privacy-policy.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -251,9 +249,17 @@ Ura also collects potentially personally-identifying information like Internet P
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/enigmail.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/enigmail.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,9 +158,9 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/enigmail.png" alt="">
+      <img class="lazy" data-src="../images/projects/enigmail.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/enigmail_icons.png" alt="">
+      <img class="lazy" data-src="../images/projects/enigmail_icons.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -179,7 +177,7 @@
         <p><span>Visual Identity</span></p>
          <hr>
         <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/Enigmail" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/enigmail" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/enigmail" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed enigmail" href="https://enigmail.net" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -199,7 +197,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -269,9 +267,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/index.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -166,7 +164,7 @@
     
       <div class="work-wrapper">
         <a href="thunderbird" class="work">
-          <img src="/images/projects/tb_overview.png" alt="">
+          <img class="lazy" data-src="/images/projects/tb_overview.png" alt="">
           <div class="info">
             <h3>Thunderbird Style Guide and Usability Study</h3>
             <p>Usability Study, Style Guide</p>
@@ -176,7 +174,7 @@
     
       <div class="work-wrapper">
         <a href="openlabs" class="work">
-          <img src="/images/projects/openlabs.jpg" alt="">
+          <img class="lazy" data-src="/images/projects/openlabs.jpg" alt="">
           <div class="info">
             <h3>Open Labs</h3>
             <p>Visual Identity</p>
@@ -186,7 +184,7 @@
     
       <div class="work-wrapper">
         <a href="openchain" class="work">
-          <img src="/images/projects/penguins_thumb.jpg" alt="">
+          <img class="lazy" data-src="/images/projects/penguins_thumb.jpg" alt="">
           <div class="info">
             <h3>OpenChain Penguins</h3>
             <p>Illustration</p>
@@ -199,7 +197,7 @@
     
       <div class="work-wrapper">
         <a href="mozilla-l10n" class="work">
-          <img src="/images/projects/mozilla-l10n.jpg" alt="">
+          <img class="lazy" data-src="/images/projects/mozilla-l10n.jpg" alt="">
           <div class="info">
             <h3>Mozilla L10N T-Shirts</h3>
             <p>Print</p>
@@ -209,7 +207,7 @@
     
       <div class="work-wrapper">
         <a href="sfk16" class="work">
-          <img src="/images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="/images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova</h3>
             <p>Visual Identity, Print</p>
@@ -219,7 +217,7 @@
     
       <div class="work-wrapper">
         <a href="tor-style-guide" class="work">
-          <img src="/images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="/images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -232,7 +230,7 @@
     
       <div class="work-wrapper">
         <a href="reproducible-builds" class="work">
-          <img src="/images/projects/rb_thumbnail.png" alt="">
+          <img class="lazy" data-src="/images/projects/rb_thumbnail.png" alt="">
           <div class="info">
             <h3>Reproducible Builds Styleguide</h3>
             <p>Style Guide</p>
@@ -242,7 +240,7 @@
     
       <div class="work-wrapper">
         <a href="enigmail" class="work">
-          <img src="/images/projects/enigmail_overview.png" alt="">
+          <img class="lazy" data-src="/images/projects/enigmail_overview.png" alt="">
           <div class="info">
             <h3>Enigmail Rebranding</h3>
             <p>Visual Identity</p>
@@ -252,7 +250,7 @@
     
       <div class="work-wrapper">
         <a href="libocon" class="work">
-          <img src="/images/projects/libocon_overview.png" alt="">
+          <img class="lazy" data-src="/images/projects/libocon_overview.png" alt="">
           <div class="info">
             <h3>LibOCon 2018 Visual Identity</h3>
             <p>Visual Identity</p>
@@ -299,9 +297,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/libocon.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/libocon.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,9 +158,9 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/libocon.png" alt="">
+      <img class="lazy" data-src="../images/projects/libocon.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/libocon_totebag.png" alt="">
+      <img class="lazy" data-src="../images/projects/libocon_totebag.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -179,7 +177,7 @@
         <p><span>Visual Identity</span></p>
          <hr>
         <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/LibOCon 2018" target="_blank" rel="noopener"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed libocon" href="https://libocon.org" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -199,7 +197,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -269,9 +267,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/mozilla-l10n.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/mozilla-l10n.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,18 +158,18 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img style="margin-left: auto; margin-right: auto; display: block;" src="../images/projects/l10n_Lions.png" alt="">
+      <img class="lazy" style="margin-left: auto; margin-right: auto; display: block;" data-src="../images/projects/l10n_Lions.png" alt="">
       <div class="spacing"></div>
       <p class="centered-text">We were asked by the Mozilla L10N team to create <br />
         2 new <strong>t-shirt designs</strong> focused around localization.</p>
       <p class="centered-text">We repeated the process this time to comply with<br />
         the new branding that came out with Quantum.</p>
       <div class="spacing"></div>
-      <img src="../images/projects/mozilla-l10n-logos.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/mozilla-l10n-logos.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/mozilla-l10n-tshirts.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/mozilla-l10n-tshirts.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/l10n-stickers.png" alt="">
+      <img class="lazy" data-src="../images/projects/l10n-stickers.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -206,7 +204,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Hackerspace</p>
@@ -217,7 +215,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -228,7 +226,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
@@ -276,9 +274,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/openchain.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/openchain.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,9 +158,9 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/penguins.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/penguins.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/A4_openchain.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/A4_openchain.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -199,7 +197,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -269,9 +267,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/openlabs.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/openlabs.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,21 +158,21 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/open-labs.jpg" alt="">
+      <img data-src="../images/projects/open-labs.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/openlabs.jpg" alt="">
+      <img data-src="../images/projects/openlabs.jpg" alt="">
       <div class="two spacing"></div>
-      <img src="../images/projects/typography.jpg" alt="">
+      <img data-src="../images/projects/typography.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/fonts.jpg" alt="">
+      <img data-src="../images/projects/fonts.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/posters.jpg" alt="">
+      <img data-src="../images/projects/posters.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/5-anniversary.jpg" alt="">
+      <img data-src="../images/projects/5-anniversary.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/copyfest-poster.jpg" alt="">
+      <img data-src="../images/projects/copyfest-poster.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/wiki_poster.jpg" alt="">
+      <img data-src="../images/projects/wiki_poster.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -190,7 +188,7 @@
         <p><span>Rebranding</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/OpenLabsHackerspace/branding" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed openlabs" href="https://openlabs.cc/en" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -232,7 +230,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
@@ -280,9 +278,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/reproducible-builds.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/reproducible-builds.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,17 +158,17 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/rb_header.png" alt="">
+      <img class="lazy" data-src="../images/projects/rb_header.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_1.png" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_1.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_4.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_4.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_2.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_2.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_3.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_3.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_5.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_5.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -187,7 +185,7 @@
         <p><span>Styleguide</span></p>
          <hr>
          <a class="button boxed blog" href="https://ura.design/2018/06/13/reproducible-builds-styleguide" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/reproducible-builds" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/reproducible-builds" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed reproduciblebuilds" href="https://reproducible-builds.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -207,7 +205,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -218,7 +216,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -229,7 +227,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="enigmail" class="work">
-            <img src="../images/projects/enigmail_overview.png" alt="">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
             <div class="info">
               <h3>Enigmail Rebranding</h3>
               <p>Rebranding</p>
@@ -277,9 +275,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/sfk16.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/sfk16.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,11 +158,11 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/poster SFK.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/poster SFK.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/SFK-bus-stop.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/SFK-bus-stop.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/roll-up-sfk.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/roll-up-sfk.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -199,7 +197,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-          <img src="../images/projects/mozilla-l10n.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
           <div class="info">
             <h3>Mozilla L10N T-shirts</h3>
             <p>Print</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
@@ -269,9 +267,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/thunderbird.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/thunderbird.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,15 +158,15 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/thunderbird_logo.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_logo.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_2.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_2.png" alt="">
       <div class="two spacing"></div>
-      <img src="../images/projects/thunderbird_3.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_3.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_4.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_4.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_1.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_1.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -186,7 +184,7 @@
          <hr>
          <a class="button boxed blog" href="https://ura.design/2018/07/05/thunderbird-style-guide" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
          <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/Thunderbird" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/thunderbird" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/thunderbird" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed thunderbird" href="https://thunderbird.net" target="_blank"><i class="fas fa-globe"></i> Website</a><br />
         <a class="button boxed thunderbird" href="https://github.com/uracreative/works/raw/master/Thunderbird/Thunderbird%20Usability%20Study.pdf" target="_blank"><i class="fas fa-globe"></i> Usability Study</a>
       </div>
@@ -207,7 +205,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="reproducible-builds" class="work">
-            <img src="../images/projects/rb_thumbnail.png" alt="">
+            <img class="lazy" data-src="../images/projects/rb_thumbnail.png" alt="">
             <div class="info">
               <h3>Reproducible Builds</h3>
               <p>Style Guide</p>
@@ -218,7 +216,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -229,7 +227,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="enigmail" class="work">
-            <img src="../images/projects/enigmail_overview.png" alt="">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
             <div class="info">
               <h3>Enigmail Rebranding</h3>
               <p>Rebranding</p>
@@ -277,9 +275,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/projects/tor-style-guide.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/tor-style-guide.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,17 +158,17 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/tor-0.png" alt="style guide 1">
+      <img class="lazy" data-src="../images/projects/tor-0.png" alt="style guide 1">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-4.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-4.png" alt="style guide 3">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-5.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-5.png" alt="style guide 3">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-1.png" alt="style guide 1">
+      <img class="lazy" data-src="../images/projects/tor-1.png" alt="style guide 1">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-2.png" alt="style guide 2">
+      <img class="lazy" data-src="../images/projects/tor-2.png" alt="style guide 2">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-3.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-3.png" alt="style guide 3">
       <div class="three spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -186,7 +184,7 @@
         <p><span>Style Guide</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/uracreative/" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed tor" href="https://styleguide.torproject.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -206,7 +204,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -217,7 +215,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-          <img src="../images/projects/penguins_thumb.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
           <div class="info">
             <h3>OpenChain Penguins</h3>
             <p>Illustration</p>
@@ -228,7 +226,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Prints</p>
@@ -276,9 +274,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/request.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/request.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -228,9 +226,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/services.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/services.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -299,9 +297,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/support-us.html

@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/support-us.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -165,7 +163,7 @@
    <div class="large-11 large-centered columns">
      <p>Ura is being supported by communities and open source initiatives. We also develop <a href="https://identihub.co">Identihub</a>, free and open source sofware to host your brand and visual assets. You can support its development by pledging on our Patreon.</p>
        <div class="large-11 large-centered centered-text columns">
-<a href="https://www.patreon.com/bePatron?u=3383740" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
+<a href="https://www.patreon.com/bePatron?u=3383740" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async data-src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
        </div>
   <hr>
      <div class="one spacing"></div>
@@ -176,7 +174,7 @@
            <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://opentech.fund" target="blank" class="work space">
-              <img src="/images/supporters/otf_logo.png" alt="OpenTechFund Logo">
+              <img class="lazy" data-src="/images/supporters/otf_logo.png" alt="OpenTechFund Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Usability Lab</h5>
               </div>
@@ -186,7 +184,7 @@
  <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://www.digitalocean.com/" target="blank" class="work space">
-              <img src="/images/supporters/digital_ocean.svg" alt="Digital Ocean Logo">
+              <img class="lazy" data-src="/images/supporters/digital_ocean.svg" alt="Digital Ocean Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Infrastructure</h5>
               </div>
@@ -196,7 +194,7 @@
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
          <a href="https://yubico.com" target="blank" class="work space">
-              <img src="/images/supporters/yubico.svg" alt="Yubico Logo">
+              <img class="lazy" data-src="/images/supporters/yubico.svg" alt="Yubico Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Security Devices</h5>
               </div>
@@ -244,9 +242,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

_site/tags/index.html

@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/tags/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -852,9 +850,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">

about.html

@@ -97,8 +97,8 @@ members:
     {% for member in page.members %}
       <div class="medium-4 columns">
         <div class="member">
-          <img src="{{site.url}}/{{member.avatar}}" alt="">
-          <img class="colored" src="{{site.url}}/{{member.avatar_hover}}" alt="">
+          <img class="lazy" data-src="{{site.url}}/{{member.avatar}}" alt="">
+          <img class="colored" data-src="{{site.url}}/{{member.avatar_hover}}" alt="">
           <div class="member-info">
             <h4>{{member.name}}</h4>
             <p class="position">{{member.position}}</p>

blog/index.html

@@ -39,7 +39,7 @@ section_id: blog
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            {% if post.images %}
-            <a href="{{ post.url | replace:'.html','' }}"><img style="display: block; margin: auto;" src="{{site.url}}/{{post.images[0]}}" alt="post"></a>
+            <a href="{{ post.url | replace:'.html','' }}"><img class="lazy" style="display: block; margin: auto;" data-src="{{site.url}}/{{post.images[0]}}" alt="post"></a>
            {% endif %}
     </div>
       </div>

index.html

@@ -126,7 +126,7 @@ clients:
   <div class="section-title">
     <div class="row">
       <div class="medium-10 medium-centered columns">
-        <img src="images/main/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
+        <img class="lazy" data-src="images/main/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
         <div class="spacing"></div>
         <h2>Design, but Open</h2>
       </div>
@@ -158,7 +158,7 @@ clients:
     <div class='large-12 columns'>
       <div class='clients'>
         {% for client in page.clients %}
-          <div><a href="{{client.url}}" target="blank"><img alt="" src="{{site.baseurl}}/{{client.image}}" width="200px" height="120px"></a></div>
+          <div><a href="{{client.url}}" target="blank"><img class="lazy" alt="" data-src="{{site.baseurl}}/{{client.image}}" width="200px" height="120px"></a></div>
         {% endfor %}
       </div>
     </div>
@@ -181,7 +181,7 @@ clients:
         <div class="quote wow slideInLeft" data-wow-delay="{{ 0.25 | times:forloop.index0 }}s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="{{testimonial.avatar}}" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="{{testimonial.avatar}}" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>{{testimonial.content}}</p>
@@ -196,7 +196,7 @@ clients:
         <div class="quote reverse wow slideInRight" class="wow" data-wow-delay="{{ 0.25 | times:forloop.index0 }}s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="{{testimonial.avatar}}" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="{{testimonial.avatar}}" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>{{testimonial.content}}</p>
@@ -226,7 +226,7 @@ clients:
     {% for work in page.works_left %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.url}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.url}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
@@ -239,7 +239,7 @@ clients:
     {% for work in page.works_middle %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.url}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.url}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
@@ -252,7 +252,7 @@ clients:
     {% for work in page.works_right %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.url}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.url}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>

logobridge.html

@@ -38,25 +38,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/5ycX7DrQ9MXsKi4" target="blank" class="work space">
-              <img src="/images/logobridge/32.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/32.png" alt="">
               <div class="info center">
                 <h5>Logo 32</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/eGzARsDPS7xK6i5" target="blank" class="work space">
-              <img src="/images/logobridge/31.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/31.png" alt="">
               <div class="info center">
                 <h5>Logo 31</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/DgDXMkK32nbGt9M" target="blank" class="work space">
-              <img src="/images/logobridge/30.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/30.png" alt="">
               <div class="info center">
                 <h5>Logo 30</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/Qkjq7WcB3gRpyed" target="blank" class="work space">
-              <img src="/images/logobridge/29.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/29.png" alt="">
               <div class="info center">
                 <h5>Logo 29</h5>
               </div>
@@ -68,25 +68,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/E7OC3cub9qmjL2c" target="blank" class="work space">
-              <img src="/images/logobridge/28.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/28.png" alt="">
               <div class="info center">
                 <h5>Logo 28</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AN8VJaf4BfbZeNs" target="blank" class="work space">
-              <img src="/images/logobridge/27.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/27.png" alt="">
               <div class="info center">
                 <h5>Logo 27</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/9z8jNL804itQ9rj" target="blank" class="work space">
-              <img src="/images/logobridge/26.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/26.png" alt="">
               <div class="info center">
                 <h5>Logo 26</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/NWUCaBe1sBmxMQr" target="blank" class="work space">
-              <img src="/images/logobridge/25.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/25.png" alt="">
               <div class="info center">
                 <h5>Logo 25</h5>
               </div>
@@ -98,25 +98,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/6MLHKgb7kaLvBdW" target="blank" class="work space">
-              <img src="/images/logobridge/24.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/24.png" alt="">
               <div class="info center">
                 <h5>Logo 24</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AXvYXt2gt9frtKP" target="blank" class="work space">
-              <img src="/images/logobridge/23.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/23.png" alt="">
               <div class="info center">
                 <h5>Logo 23</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/2PpGi036WDkiw3x" target="blank" class="work space">
-              <img src="/images/logobridge/22.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/22.png" alt="">
               <div class="info center">
                 <h5>Logo 22</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/nfB7kgOVRbu1DWH" target="blank" class="work space">
-            <img src="/images/logobridge/21.png" alt="">
+            <img class="lazy" data-src="/images/logobridge/21.png" alt="">
               <div class="info center">
                 <h5>Logo 21</h5>
               </div>
@@ -128,25 +128,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/uOpHJ03pFydVhnk" target="blank" class="work space">
-              <img src="/images/logobridge/20.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/20.png" alt="">
               <div class="info center">
                 <h5>Logo 20</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ug9TQ6QDG1bk9AG" target="blank" class="work space">
-              <img src="/images/logobridge/19.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/19.png" alt="">
               <div class="info center">
                 <h5>Logo 19</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AUdTz6wgkwtHCBd" target="blank" class="work space">
-              <img src="/images/logobridge/18.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/18.png" alt="">
               <div class="info center">
                 <h5>Logo 18</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/EVEChXZfCUQcO5G" target="blank" class="work space">
-              <img src="/images/logobridge/17.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/17.png" alt="">
               <div class="info center">
                 <h5>Logo 17</h5>
               </div>
@@ -158,25 +158,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/ZD71SvkYhiorZae" target="blank" class="work space">
-              <img src="/images/logobridge/16.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/16.png" alt="">
               <div class="info center">
                 <h5>Logo 16</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/vc7FKx1icMeq3QL" target="blank" class="work space">
-              <img src="/images/logobridge/15.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/15.png" alt="">
               <div class="info center">
                 <h5>Logo 15</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/SR2WegS5qin08AZ" target="blank" class="work space">
-              <img src="/images/logobridge/14.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/14.png" alt="">
               <div class="info center">
                 <h5>Logo 14</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/vy1H32n3wYudvvK" target="blank" class="work space">
-              <img src="/images/logobridge/13.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/13.png" alt="">
               <div class="info center">
                 <h5>Logo 13</h5>
               </div>
@@ -188,25 +188,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/LLcBzhPfeJYXjn6" target="blank" class="work space">
-              <img src="/images/logobridge/12.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/12.png" alt="">
               <div class="info center">
                 <h5>Logo 12</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/g07EQygQXx9AnTu" target="blank" class="work space">
-              <img src="/images/logobridge/11.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/11.png" alt="">
               <div class="info center">
                 <h5>Logo 11</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ECmitgpnrH2sene" target="blank" class="work space">
-              <img src="/images/logobridge/10.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/10.png" alt="">
               <div class="info center">
                 <h5>Logo 10</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/tkfXiEpuynDhXYV" target="blank" class="work space">
-              <img src="/images/logobridge/9.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/9.png" alt="">
               <div class="info center">
                 <h5>Logo 9</h5>
               </div>
@@ -218,25 +218,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/cVBkctDp4ApGSYC" target="blank" class="work space">
-              <img src="/images/logobridge/8.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/8.png" alt="">
               <div class="info center">
                 <h5>Logo 8</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/cxpyGtJ9xif52Kw" target="blank" class="work space">
-              <img src="/images/logobridge/7.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/7.png" alt="">
               <div class="info center">
                 <h5>Logo 7</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ramqPdYHZlaQ2u8" target="blank" class="work space">
-              <img src="/images/logobridge/6.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/6.png" alt="">
               <div class="info center">
                 <h5>Logo 6</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/eZqxXpJu6hIlqCa" target="blank" class="work space">
-              <img src="/images/logobridge/5.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/5.png" alt="">
               <div class="info center">
                 <h5>Logo 5</h5>
               </div>
@@ -248,25 +248,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/SVLtm1eF6P7LmgZ" target="blank" class="work space">
-              <img src="/images/logobridge/4.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/4.png" alt="">
               <div class="info center">
                 <h5>Logo 4</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/9ULnGadMZLiZuwl" target="blank" class="work space">
-              <img src="/images/logobridge/3.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/3.png" alt="">
               <div class="info center">
                 <h5>Logo 3</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ViMmeuvoLmXsjjF" target="blank" class="work space">
-              <img src="/images/logobridge/2.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/2.png" alt="">
               <div class="info center">
                 <h5>Logo 2</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/6zlp51kBNGogrbC" target="blank" class="work space">
-              <img src="/images/logobridge/1.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/1.png" alt="">
               <div class="info center">
                 <h5>Logo 1</h5>
               </div>

projects/enigmail.html

@@ -16,9 +16,9 @@ title: Enigmail Rebranding
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/enigmail.png" alt="">
+      <img class="lazy" data-src="../images/projects/enigmail.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/enigmail_icons.png" alt="">
+      <img class="lazy" data-src="../images/projects/enigmail_icons.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -35,7 +35,7 @@ title: Enigmail Rebranding
         <p><span>Visual Identity</span></p>
          <hr>
         <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/Enigmail" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/enigmail" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/enigmail" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed enigmail" href="https://enigmail.net" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -55,7 +55,7 @@ title: Enigmail Rebranding
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -66,7 +66,7 @@ title: Enigmail Rebranding
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -77,7 +77,7 @@ title: Enigmail Rebranding
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>

projects/index.html

@@ -59,7 +59,7 @@ works_right:
     {% for work in page.works_left %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.baseurl}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.baseurl}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
@@ -72,7 +72,7 @@ works_right:
     {% for work in page.works_middle %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.baseurl}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.baseurl}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
@@ -85,7 +85,7 @@ works_right:
     {% for work in page.works_right %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.baseurl}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.baseurl}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>

projects/libocon.html

@@ -16,9 +16,9 @@ title: LibOCon 2018 Visual Identity
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/libocon.png" alt="">
+      <img class="lazy" data-src="../images/projects/libocon.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/libocon_totebag.png" alt="">
+      <img class="lazy" data-src="../images/projects/libocon_totebag.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -35,7 +35,7 @@ title: LibOCon 2018 Visual Identity
         <p><span>Visual Identity</span></p>
          <hr>
         <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/LibOCon 2018" target="_blank" rel="noopener"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed libocon" href="https://libocon.org" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -55,7 +55,7 @@ title: LibOCon 2018 Visual Identity
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -66,7 +66,7 @@ title: LibOCon 2018 Visual Identity
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -77,7 +77,7 @@ title: LibOCon 2018 Visual Identity
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>

projects/mozilla-l10n.html

@@ -16,18 +16,18 @@ title: Mozilla L10N T-Shirts
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img style="margin-left: auto; margin-right: auto; display: block;" src="../images/projects/l10n_Lions.png" alt="">
+      <img class="lazy" style="margin-left: auto; margin-right: auto; display: block;" data-src="../images/projects/l10n_Lions.png" alt="">
       <div class="spacing"></div>
       <p class="centered-text">We were asked by the Mozilla L10N team to create <br />
         2 new <strong>t-shirt designs</strong> focused around localization.</p>
       <p class="centered-text">We repeated the process this time to comply with<br />
         the new branding that came out with Quantum.</p>
       <div class="spacing"></div>
-      <img src="../images/projects/mozilla-l10n-logos.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/mozilla-l10n-logos.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/mozilla-l10n-tshirts.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/mozilla-l10n-tshirts.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/l10n-stickers.png" alt="">
+      <img class="lazy" data-src="../images/projects/l10n-stickers.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -62,7 +62,7 @@ title: Mozilla L10N T-Shirts
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Hackerspace</p>
@@ -73,7 +73,7 @@ title: Mozilla L10N T-Shirts
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -84,7 +84,7 @@ title: Mozilla L10N T-Shirts
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>

projects/openchain.html

@@ -16,9 +16,9 @@ title: OpenChain Penguins
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/penguins.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/penguins.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/A4_openchain.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/A4_openchain.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -55,7 +55,7 @@ title: OpenChain Penguins
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -66,7 +66,7 @@ title: OpenChain Penguins
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -77,7 +77,7 @@ title: OpenChain Penguins
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>

projects/openlabs.html

@@ -16,21 +16,21 @@ title: Open Labs
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/open-labs.jpg" alt="">
+      <img data-src="../images/projects/open-labs.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/openlabs.jpg" alt="">
+      <img data-src="../images/projects/openlabs.jpg" alt="">
       <div class="two spacing"></div>
-      <img src="../images/projects/typography.jpg" alt="">
+      <img data-src="../images/projects/typography.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/fonts.jpg" alt="">
+      <img data-src="../images/projects/fonts.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/posters.jpg" alt="">
+      <img data-src="../images/projects/posters.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/5-anniversary.jpg" alt="">
+      <img data-src="../images/projects/5-anniversary.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/copyfest-poster.jpg" alt="">
+      <img data-src="../images/projects/copyfest-poster.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/wiki_poster.jpg" alt="">
+      <img data-src="../images/projects/wiki_poster.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -46,7 +46,7 @@ title: Open Labs
         <p><span>Rebranding</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/OpenLabsHackerspace/branding" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed openlabs" href="https://openlabs.cc/en" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -66,7 +66,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -77,7 +77,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -88,7 +88,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>

projects/reproducible-builds.html

@@ -16,17 +16,17 @@ title: Reproducible Builds | Styleguide
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/rb_header.png" alt="">
+      <img class="lazy" data-src="../images/projects/rb_header.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_1.png" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_1.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_4.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_4.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_2.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_2.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_3.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_3.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_5.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_5.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -43,7 +43,7 @@ title: Reproducible Builds | Styleguide
         <p><span>Styleguide</span></p>
          <hr>
          <a class="button boxed blog" href="https://ura.design/2018/06/13/reproducible-builds-styleguide" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/reproducible-builds" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/reproducible-builds" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed reproduciblebuilds" href="https://reproducible-builds.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -63,7 +63,7 @@ title: Reproducible Builds | Styleguide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -74,7 +74,7 @@ title: Reproducible Builds | Styleguide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -85,7 +85,7 @@ title: Reproducible Builds | Styleguide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="enigmail" class="work">
-            <img src="../images/projects/enigmail_overview.png" alt="">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
             <div class="info">
               <h3>Enigmail Rebranding</h3>
               <p>Rebranding</p>

projects/sfk16.html

@@ -16,11 +16,11 @@ title: Software Freedom Kosova '16
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/poster SFK.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/poster SFK.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/SFK-bus-stop.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/SFK-bus-stop.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/roll-up-sfk.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/roll-up-sfk.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -55,7 +55,7 @@ title: Software Freedom Kosova '16
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -66,7 +66,7 @@ title: Software Freedom Kosova '16
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-          <img src="../images/projects/mozilla-l10n.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
           <div class="info">
             <h3>Mozilla L10N T-shirts</h3>
             <p>Print</p>
@@ -77,7 +77,7 @@ title: Software Freedom Kosova '16
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>

projects/thunderbird.html

@@ -16,15 +16,15 @@ title: Thunderbird Style Guide and Usability Study
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/thunderbird_logo.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_logo.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_2.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_2.png" alt="">
       <div class="two spacing"></div>
-      <img src="../images/projects/thunderbird_3.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_3.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_4.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_4.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_1.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_1.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -42,7 +42,7 @@ title: Thunderbird Style Guide and Usability Study
          <hr>
          <a class="button boxed blog" href="https://ura.design/2018/07/05/thunderbird-style-guide" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
          <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/Thunderbird" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/thunderbird" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/thunderbird" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed thunderbird" href="https://thunderbird.net" target="_blank"><i class="fas fa-globe"></i> Website</a><br />
         <a class="button boxed thunderbird" href="https://github.com/uracreative/works/raw/master/Thunderbird/Thunderbird%20Usability%20Study.pdf" target="_blank"><i class="fas fa-globe"></i> Usability Study</a>
       </div>
@@ -63,7 +63,7 @@ title: Thunderbird Style Guide and Usability Study
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="reproducible-builds" class="work">
-            <img src="../images/projects/rb_thumbnail.png" alt="">
+            <img class="lazy" data-src="../images/projects/rb_thumbnail.png" alt="">
             <div class="info">
               <h3>Reproducible Builds</h3>
               <p>Style Guide</p>
@@ -74,7 +74,7 @@ title: Thunderbird Style Guide and Usability Study
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -85,7 +85,7 @@ title: Thunderbird Style Guide and Usability Study
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="enigmail" class="work">
-            <img src="../images/projects/enigmail_overview.png" alt="">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
             <div class="info">
               <h3>Enigmail Rebranding</h3>
               <p>Rebranding</p>

projects/tor-style-guide.html

@@ -16,17 +16,17 @@ title: Tor Style Guide
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/tor-0.png" alt="style guide 1">
+      <img class="lazy" data-src="../images/projects/tor-0.png" alt="style guide 1">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-4.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-4.png" alt="style guide 3">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-5.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-5.png" alt="style guide 3">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-1.png" alt="style guide 1">
+      <img class="lazy" data-src="../images/projects/tor-1.png" alt="style guide 1">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-2.png" alt="style guide 2">
+      <img class="lazy" data-src="../images/projects/tor-2.png" alt="style guide 2">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-3.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-3.png" alt="style guide 3">
       <div class="three spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -42,7 +42,7 @@ title: Tor Style Guide
         <p><span>Style Guide</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/uracreative/" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed tor" href="https://styleguide.torproject.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -62,7 +62,7 @@ title: Tor Style Guide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -73,7 +73,7 @@ title: Tor Style Guide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-          <img src="../images/projects/penguins_thumb.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
           <div class="info">
             <h3>OpenChain Penguins</h3>
             <p>Illustration</p>
@@ -84,7 +84,7 @@ title: Tor Style Guide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Prints</p>

support-us.html

@@ -19,7 +19,7 @@ section_id: pages
    <div class="large-11 large-centered columns">
      <p>Ura is being supported by communities and open source initiatives. We also develop <a href="https://identihub.co">Identihub</a>, free and open source sofware to host your brand and visual assets. You can support its development by pledging on our Patreon.</p>
        <div class="large-11 large-centered centered-text columns">
-<a href="https://www.patreon.com/bePatron?u=3383740" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
+<a href="https://www.patreon.com/bePatron?u=3383740" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async data-src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
        </div>
   <hr>
      <div class="one spacing"></div>
@@ -30,7 +30,7 @@ section_id: pages
            <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://opentech.fund" target="blank" class="work space">
-              <img src="/images/supporters/otf_logo.png" alt="OpenTechFund Logo">
+              <img class="lazy" data-src="/images/supporters/otf_logo.png" alt="OpenTechFund Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Usability Lab</h5>
               </div>
@@ -40,7 +40,7 @@ section_id: pages
  <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://www.digitalocean.com/" target="blank" class="work space">
-              <img src="/images/supporters/digital_ocean.svg" alt="Digital Ocean Logo">
+              <img class="lazy" data-src="/images/supporters/digital_ocean.svg" alt="Digital Ocean Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Infrastructure</h5>
               </div>
@@ -50,7 +50,7 @@ section_id: pages
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
          <a href="https://yubico.com" target="blank" class="work space">
-              <img src="/images/supporters/yubico.svg" alt="Yubico Logo">
+              <img class="lazy" data-src="/images/supporters/yubico.svg" alt="Yubico Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Security Devices</h5>
               </div>