Update fonts.

sites/hurl.dev/_docs/response.md

@@ -113,12 +113,12 @@ On each response, libcurl response timings are available:
 
 All timings are in microsecond.
 
-<div>
-    <img class="light-img u-drop-shadow u-border u-mt-4" src="{{ '/assets/img/timings-light.svg' | prepend:site.baseurl }}" width="100%" alt="Response timings explanation"/>
-    <img class="dark-img u-drop-shadow u-border u-mt-4" src="{{ '/assets/img/timings-dark.svg' | prepend:site.baseurl }}" width="100%" alt="Response timings explanation"/>
+<div class="picture">
+    <img class="light-img u-drop-shadow u-border" src="{{ '/assets/img/timings-light.svg' | prepend:site.baseurl }}" width="100%" alt="Response timings explanation"/>
+    <img class="dark-img u-drop-shadow u-border" src="{{ '/assets/img/timings-dark.svg' | prepend:site.baseurl }}" width="100%" alt="Response timings explanation"/>
+    <a href="https://blog.cloudflare.com/a-question-of-timing/"><small>Courtesy of CloudFlare</small></a>
 </div>
 
-<a href="https://blog.cloudflare.com/a-question-of-timing/"><small>Courtesy of CloudFlare</small></a>
 
 
 [requests]: {% link _docs/request.md %}

sites/hurl.dev/_docs/running-tests.md

@@ -78,11 +78,15 @@ Hurl can generate an HTML report by using the [`--report-html HTML_DIR`] option.
 
 If the HTML report already exists, the test results will be appended to it.
 
-<img id="running-test-1" src="{{ '/assets/img/hurl-html-report.png' | prepend:site.baseurl }}" alt="Hurl HTML Report">
+<div class="picture">
+    <img id="running-test-1" src="{{ '/assets/img/hurl-html-report.png' | prepend:site.baseurl }}" alt="Hurl HTML Report">
+</div>
 
 The input Hurl files (HTML version) are also included and are easily accessed from the main page.
 
-<img id="running-test-2" src="{{ '/assets/img/hurl-html-file.png' | prepend:site.baseurl }}" alt="Hurl HTML file">
+<div class="picture">
+    <img id="running-test-2" src="{{ '/assets/img/hurl-html-file.png' | prepend:site.baseurl }}" alt="Hurl HTML file">
+</div>
 
 ### JUnit Report
 

sites/hurl.dev/_docs/tutorial/ci-cd-integration.md

@@ -178,10 +178,10 @@ to create a [GitHub Action]. You can also see how to integrate your tests in [Gi
 {:start="1"}
 1. Create a new empty repository in GitHub, named `quiz-project`:
 
-<p>
+<div class="picture">
     <img class="light-img u-drop-shadow u-border" src="{{ '/assets/img/github-new-repository-light.png' | prepend:site.baseurl }}" width="100%" alt="Create new GitHub repository"/>
     <img class="dark-img u-drop-shadow u-border" src="{{ '/assets/img/github-new-repository-dark.png' | prepend:site.baseurl }}" width="100%" alt="Create new GitHub repository"/>
-</p>
+</div>
 
 
 {:start="2"}
@@ -253,10 +253,10 @@ Counting objects: 100% (6/6), done.
 
 Finally, you can check on GitHub that our action is running:
 
-<p>
+<div class="picture">
     <img class="light-img u-drop-shadow u-border" src="{{ '/assets/img/github-action-light.png' | prepend:site.baseurl }}" width="100%" alt="GitHub Action"/>
     <img class="dark-img u-drop-shadow u-border" src="{{ '/assets/img/github-action-dark.png' | prepend:site.baseurl }}" width="100%" alt="GitHub Action"/>
-</p>
+</div>
 
 ## Running Tests with GitLab CI/CD
 

sites/hurl.dev/_sass/_variables.scss

@@ -5,7 +5,7 @@ $m4: 4*$m1; // 32px
 $m5: 5*$m1; // 40px
 $m6: 6*$m1; // 48px
 $m7: 7*$m1; // 56px
-$m8: 8*$m1; // 56px
+$m8: 8*$m1; // 64px
 
 $sm: 375px;
 $md: 768px;

sites/hurl.dev/_sass/main.scss

@@ -35,7 +35,18 @@ a[aria-selected="true"] {
 }
 
 // Make title all linkable
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url("../font/opensans-700.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 h1 {
+  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
   a, a:visited, a:focus, a:hover, a:active {
     color: $primary-color-light;
     color: var(--primary-color);
@@ -84,6 +95,11 @@ ul, ol {
   margin-bottom: $m2;
 }
 
+.picture {
+  margin-top: $m2;
+  margin-bottom: $m4;
+}
+
 blockquote {
   border-left: 4px solid;
   border-left-color: $separator-color-light;

sites/hurl.dev/index.md

@@ -138,9 +138,19 @@ sha256 == hex,039058c6f2c0cb492c533b0a4d14ef77cc0f78abccced5287d84a1a2011cfb81;
 
 Finally, Hurl is easy to <b>integrate in CI/CD</b>, with text, JUnit and HTML reports
 
-<div class="home-html-report">
-    <img class="light-img u-drop-shadow u-border" src="{{ '/assets/img/home-waterfall-light.png' | prepend:site.baseurl }}" alt="HTML report"/>
-    <img class="dark-img u-drop-shadow u-border" src="{{ '/assets/img/home-waterfall-dark.png' | prepend:site.baseurl }}" alt="HTML report"/>
+<div class="picture home-html-report">
+    <picture>
+        <source srcset="{{ '/assets/img/home-waterfall-light.avif' | prepend:site.baseurl }}" type="image/avif">
+        <source srcset="{{ '/assets/img/home-waterfall-light.webp' | prepend:site.baseurl }}" type="image/webp">
+        <source srcset="{{ '/assets/img/home-waterfall-light.png' | prepend:site.baseurl }}" type="image/png">
+        <img class="light-img u-drop-shadow u-border" src="{{ '/assets/img/home-waterfall-light.png' | prepend:site.baseurl }}" alt="HTML report"/>
+    </picture>
+    <picture>
+        <source srcset="{{ '/assets/img/home-waterfall-dark.avif' | prepend:site.baseurl }}" type="image/avif">
+        <source srcset="{{ '/assets/img/home-waterfall-dark.webp' | prepend:site.baseurl }}" type="image/webp">
+        <source srcset="{{ '/assets/img/home-waterfall-dark.png' | prepend:site.baseurl }}" type="image/png">
+        <img class="dark-img u-drop-shadow u-border" src="{{ '/assets/img/home-waterfall-dark.png' | prepend:site.baseurl }}" alt="HTML report"/>
+    </picture>
 </div>
 
 # Why Hurl?