responsive cards

This commit is contained in:
John Hess 2024-06-25 12:37:39 -05:00
parent 1fbfc285a4
commit b00cc94e73
5 changed files with 93 additions and 83 deletions

View file

@ -6,35 +6,28 @@ layout: default
<div class="container">
<div class="content">
<!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
<a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}">
<div class="card">
<img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
{% t explore %}
</div>
<h1 class="homepage-title">{% t butter_box_title %}</h1>
<!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
<div class="card-set">
<a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
class="card">
<img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
{% t explore %}
</a>
<div id="usb-butter-placeholder">
<div class="card">
{% t explore_missing %}
</div>
<div id="usb-butter-placeholder" class="card">
{% t explore_missing %}
</div>
<a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}">
<div class="card">
<img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
{% t message_board %}
</div>
<a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}" class="card">
<img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
{% t message_board %}
</a>
<a href="{{ site.baseurl }}/apps">
<div class="card">
<img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
{% t app_store %}
</div>
<a href="{{ site.baseurl }}/apps" class="card">
<img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
{% t app_store %}
</a>
<a href="{{ site.baseurl }}/maps">
<div class="card">
<img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
{% t offline_maps %}
</div>
<a href="{{ site.baseurl }}/maps" class="card">
<img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
{% t offline_maps %}
</a>
</div>
</div>
</div></div>