butter/butter-kanglam-ui
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

responsive homepage

Browse source
This commit is contained in:
John Hess 2024-06-25 18:18:25 -05:00
parent 187368f716
commit 9aac1b0b8f
3 changed files with 34 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
_i18n/en.yml
View file

@ -7,6 +7,7 @@ view_all_apps: 'View All Apps'
built_on_fdroid: Built on F-Droid Free Software built_on_fdroid: Built on F-Droid Free Software
butter_box_title: 'Welcome to the Butter Box' butter_box_title: 'Welcome to the Butter Box'
butter_box_subtitle: "View and download the information you want from this offline box."
explore: 'Explore USB' explore: 'Explore USB'
explore_missing: 'Insert USB drive to broadcast content' explore_missing: 'Insert USB drive to broadcast content'
message_board: "Message Board" message_board: "Message Board"

28
_scss/pages/home.scss
View file

@ -55,11 +55,13 @@ a:active {
// center content vertically // center content vertically
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
.header-container { .header-container {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
max-width: 920px;
padding: 0 20px; padding: 0 20px;
} }
@ -156,7 +158,6 @@ a:active {
text-decoration: none; text-decoration: none;
} }
.content { .content {
padding: 20px; padding: 20px;
} }
@ -171,11 +172,36 @@ a:active {
.card-set { .card-set {
grid-template-columns: repeat(4, 1fr); /* 4 columns for larger screens */ grid-template-columns: repeat(4, 1fr); /* 4 columns for larger screens */
} }
.drippy {
display: block;
width: 90px;
margin-left: auto;
margin-right: auto;
}
h1.homepage-title {
text-align: center;
}
}
@media (max-width: 900px) {
.drippy {
display: none;
}
.homepage-subtitle {
display: none;
}
} }
h1.homepage-title { h1.homepage-title {
margin: 30px 0; margin: 30px 0;
} }
.homepage-subtitle {
color: #9b9a98;
font-size: 16px;
font-weight: 400;
margin: 0 auto 50px auto;
max-width: 340px;
text-align: center;
}
.card { .card {
align-items: center; align-items: center;

9
index.html
View file

@ -6,17 +6,20 @@ layout: default
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<img src="{{ site.baseurl }}/assets/images/btr-logo.svg" alt="Paddy, the Butter Box Mascot"
class="drippy" />
<h1 class="homepage-title">{% t butter_box_title %}</h1> <h1 class="homepage-title">{% t butter_box_title %}</h1>
<h1 class="homepage-subtitle">{% t butter_box_subtitle %}</h1>
<!-- Defaults to display: none; revealed via JS depending on USB insertion. --> <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
<div class="card-set"> <div class="card-set">
<div id="usb-butter-placeholder" class="card">
{% t explore_missing %}
</div>
<a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}" <a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
class="card"> class="card">
<img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon"> <img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon">
{% t explore %} {% t explore %}
</a> </a>
<div id="usb-butter-placeholder" class="card">
{% t explore_missing %}
</div>
<a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}" class="card"> <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"> <img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
{% t message_board %} {% t message_board %}