Commit 444098a5 authored by wright08's avatar wright08

Add responsive images for homepage.

Using media queries inside of a picture element, we can serve up smaller images for mobile users.
Bringing the homepage picture locally to img/redox-orbital gives us more control over image sizes and formats.
parent df7053a9
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox running Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox kører Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox unter Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox running Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox kurante Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox ejecutando Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -41,8 +41,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox avec Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -37,8 +37,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Orbital futtatása Redox alatt
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox con Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
RedoxがOrbitalを実行している様子
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Orbital을 사용중인 Redox
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox met Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox kjører Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -37,8 +37,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox ze środowiskiem Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox executando Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox с Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox kör Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox Orbital'i çalıştırırken
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox із Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
......@@ -38,8 +38,16 @@ url = "/home"
<div style="font-size: 16px; text-align: center;">
Redox执行Orbital
</div>
<a href="https://i.imgur.com/MJqsqYo.png">
<img class="img-responsive" src="https://i.imgur.com/MJqsqYo.png"/>
<a href="img/redox-orbital/large.png">
<picture>
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="img/redox-orbital/medium.webp" type="image/webp">
<source media="(min-width: 1300px)" srcset="img/redox-orbital/large.png" type="image/png">
<source media="(min-width: 640px)" srcset="img/redox-orbital/medium.png" type="image/png">
<source media="(min-width: 320px)" srcset="img/redox-orbital/small.png" type="image/png">
<img src="img/redox-orbital/medium.png" class="img-responsive" alt="Redox and Orbital">
</picture>
</a>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment