Merge branch 'improve-images' into 'develop'

Improve images

See merge request elixir/jekyll-elixir-theme!25

_layouts/default.html

@@ -7,7 +7,7 @@
 
         <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
         <link rel="shortcut icon" href="{{ "/assets/favicon.png" | relative_url }}" />
-        <link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,400italic,700" media="all">
+        <link type="text/css" rel="stylesheet" href="{{ "/assets/lato.css" | relative_url }}" media="all">
 
         <title>{{ site.title }}{% if page.title %} - {{ page.title }}{% endif %}</title>
     </head>

_layouts/index.html

@@ -22,9 +22,9 @@ layout: default
 
           <div class="index-photo">
             <picture>
-              <source media="(min-width: 200px)" srcset="https://webdav-r3lab.uni.lu/public/elixir/website/images/cover_big.jpg" alt="Elixir Luxembourg" />
-              <source media="(max-width: 200px)" srcset="https://webdav-r3lab.uni.lu/public/elixir/website/images/cover_small.jpg" alt="Elixir Luxembourg" />
-              <img src="https://webdav-r3lab.uni.lu/public/elixir/website/images/cover_small.jpg" alt="Elixir Luxembourg" />
+              <source media="(min-width: 200px)" srcset="{{ '/assets/cover_big.webp' | relative_url }}" alt="Elixir Luxembourg" />
+              <source media="(max-width: 200px)" srcset="{{ '/assets/cover_small.webp' | relative_url }}" alt="Elixir Luxembourg" />
+              <img src="{{ '/assets/cover_small.webp' | relative_url }}" alt="Elixir Luxembourg" />
             </picture>
           </div>
         </div>

assets/lato.css

+/* Font faces from https://fonts.googleapis.com/css?family=Lato:400,400italic,700 */
+
+/* latin-ext */
+@font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v16/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v16/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
\ No newline at end of file

elixir-theme.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-elixir-theme"
-  spec.version       = "0.9.15"
+  spec.version       = "0.9.16"
   spec.authors       = ["jacek.lebioda"]
   spec.email         = ["jacek.lebioda@uni.lu"]
 

index.md

@@ -24,9 +24,22 @@ Sustainable access management according to well-defined criteria, in order to me
 
 ---
 
-[![Data Catalog]({{ '/assets/buttons/data_catalog.jpg' | relative_url }}){:width="155px"}]({{ '/sustainability-data/' | relative_url }})
-[![Tools Registry]({{ '/assets/buttons/tools_registry.jpg' | relative_url }}){:width="155px"}]({{ '/sustainability-tools/' | relative_url }})
-[![GDPR activities]({{ '/assets/buttons/gdpr.jpg' | relative_url }}){:width="155px"}]({{ '/gdpr-activities/' | relative_url }})
+<a href="{{ '/sustainability-data/' | relative_url }}"><picture>
+    <source media="(max-width: 600px)" srcset="{{ '/assets/buttons/data_catalog_small.jpg' | relative_url }}" />
+    <source media="(min-width: 600px)" srcset="{{ '/assets/buttons/data_catalog.jpg' | relative_url }}" />
+    <img src="{{ '/assets/buttons/data_catalog.jpg' | relative_url }}" alt="Data catalog" style="width:155px;" />
+  </picture></a>
+<a href="{{ '/sustainability-tools/' | relative_url }}"><picture>
+    <source media="(max-width: 600px)" srcset="{{ '/assets/buttons/tools_registry_small.jpg' | relative_url }}" />
+    <source media="(min-width: 600px)" srcset="{{ '/assets/buttons/tools_registry.jpg' | relative_url }}" />
+    <img src="{{ '/assets/buttons/tools_registry.jpg' | relative_url }}" alt="Tools Registry" style="width:155px;" />
+</picture></a>
+<a href="{{ '/gdpr-activities/' | relative_url }}"><picture>
+    <source media="(max-width: 600px)" srcset="{{ '/assets/buttons/gdpr_small.jpg' | relative_url }}" />
+    <source media="(min-width: 600px)" srcset="{{ '/assets/buttons/gdpr.jpg' | relative_url }}" />
+    <img src="{{ '/assets/buttons/gdpr.jpg' | relative_url }}" alt="GDPR activities" style="width:155px;" />
+  </picture></a>
+
 
 ---