responsive image sizes on landing page

This commit is contained in:
Justin Cooper 2019-03-11 11:37:09 -05:00
parent 3fc59eb167
commit e08561182f
2 changed files with 8 additions and 3 deletions

View file

@ -14,3 +14,8 @@ a {
h1, h2, h3, h4, h5 {
font-weight: 500;
}
.responsive {
max-width: 100%;
height: auto;
}

View file

@ -7,7 +7,7 @@ layout: home
<div id="home-page">
<div class="content">
<img src="{{ "/assets/images/blinka-computer.png" | relative_url }}" srcset="{{ "/assets/images/blinka-computer.png" | relative_url }} 1x,
<img class="responsive" src="{{ "/assets/images/blinka-computer.png" | relative_url }}" srcset="{{ "/assets/images/blinka-computer.png" | relative_url }} 1x,
{{ "/assets/images/blinka-computer@2x.png" | relative_url }} 2x,
{{ "/assets/images/blinka-computer@3x.png" | relative_url }} 3x" alt="Blinka at a computer">
<h1>The easiest way to program microcontrollers</h1>
@ -22,7 +22,7 @@ layout: home
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Get started with CircuitPython &gt;</a>
</p>
<hr />
<img src="{{ "/assets/images/python.png" | relative_url }}"
<img class="responsive" src="{{ "/assets/images/python.png" | relative_url }}"
srcset="{{ "/assets/images/python.png" | relative_url }} 1x,
{{ "/assets/images/python@2x.png" | relative_url }} 2x,
{{ "/assets/images/python@3x.png" | relative_url }} 3x" alt="Python Logo">
@ -43,7 +43,7 @@ layout: home
get started! Learning CircuitPython is learning Python.
</p>
<hr />
<img src="{{ "/assets/images/microcontrollers.png" | relative_url }}"
<img class="responsive" src="{{ "/assets/images/microcontrollers.png" | relative_url }}"
srcset="{{ "/assets/images/microcontrollers.png" | relative_url }} 1x,
{{ "/assets/images/microcontrollers@2x.png" | relative_url }} 2x,
{{ "/assets/images/microcontrollers@3x.png" | relative_url }} 3x" alt="Image of various microcontrollers">