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

responsive cards

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

26
_includes/header.html
View file

@ -1,21 +1,11 @@
<header class="header" style="background-image: url('{{ site.baseurl }}/assets/images/btr-texture.png');"> <!-- set bg url here so we can apply site.baseurl --> <header class="header">
<div class="container"> <div class="header-container">
<div class="header-area-wrapper"> <img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
<div class="header-menu"> <div class="title">{% t site_name %}</div>
<ul class="header-menu-list ls-40"> <div class="language-selector">
{% for lang in site.languages %} <img src="{{ site.baseurl }}/assets/images/globe.svg" alt="language selector icon"/>
{% if forloop.index0 == 0 %} <span class="language-code">{{ site.lang | upcase }}</span>
<li><a href="{{ page.url | relative_url }}" class="darklink">{{ site.data.home.language_selector[lang] }}</a></li> <img src="{{ site.baseurl }}/assets/images/caret-down.svg"/>
{% else %}
<li><a href="{{ lang + page.url | relative_url }}" class="darklink">{{ site.data.home.language_selector[lang] }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div> </div>
</div> </div>
<div class="header-content">
<img src="{{ site.baseurl }}/assets/images/paddy.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
<div class="header-title">{% t butter_box_title %}</div>
</div>
</header> </header>

95
_scss/pages/home.scss
View file

@ -46,52 +46,54 @@ a:active {
// ------------------------- // -------------------------
.container { .container {
width: 100%; width: 100%;
max-width: 400px; max-width: 1144px;
margin: 0 auto; margin: 0 auto;
} }
.header { .header {
position: relative; height: 48px;
background-color: $gold; // center content vertically
// Set background image in HTML so we can use site.baseurl display: flex;
background-size: 170px; align-items: center;
padding: 0 0 100px 0;
text-align: center;
border-radius: 0 0 20px 20px;
z-index: 1;
// Language selector .header-container {
&-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; width: 100%;
flex-direction: column; padding: 0 20px;
}
.header-menu {
&-list {
padding-left: 0;
list-style: none;
li {
display: inline-block;
&.active {
font-weight: 600;
}
&:not(:last-child) {
margin: 10px;
}
}
}
} }
.title {
text-align: left;
font-size: 14;
font-weight: 600;
margin: auto;
width: -webkit-fill-available;
}
.language-selector {
align-items: center;
background-color: #F4F3F2;
border-radius: 16px;
display: flex;
height: 32px;
padding: 0 10px;
width: 100px;
}
.language-code {
margin: 0 8px;
}
} }
.header-content { .header-content {
position: relative; position: relative;
z-index: 2;
} }
.header-image { .header-image {
width: 150px; height: 28px;
width: 28px;
margin-right: 20px;
} }
.header-title { .header-title {
@ -102,24 +104,39 @@ a:active {
} }
.content { .content {
position: relative;
top: -100px;
padding: 20px; padding: 20px;
z-index: 2; }
.card-set {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Default to 2 columns */
gap: 10px; /* Adjust the gap between the cards */
}
@media (min-width: 900px) {
.card-set {
grid-template-columns: repeat(4, 1fr); /* 4 columns for larger screens */
}
}
h1.homepage-title {
margin: 30px 0;
} }
.card { .card {
align-items: center;
background-color: white; background-color: white;
padding: 20px; border: 1px solid #E1E1DE;
margin: 10px 0;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
font-size: 1.2em;
color: #333; color: #333;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; font-size: 16px;
height: 160px;
justify-content: center;
margin: 10px 0;
padding: 20px;
text-align: center;
} }
.card-icon { .card-icon {

4
assets/images/caret-down.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.52876 6.19543C3.78911 5.93508 4.21122 5.93508 4.47157 6.19542L8.00016 9.72402L11.5288 6.19542C11.7891 5.93507 12.2112 5.93507 12.4716 6.19542C12.7319 6.45577 12.7319 6.87788 12.4716 7.13823L8.47157 11.1382C8.21122 11.3986 7.78911 11.3986 7.52876 11.1382L3.52876 7.13823C3.26841 6.87788 3.26841 6.45577 3.52876 6.19543Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 502 B

6
assets/images/globe.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21C13.6569 21 15 16.9706 15 12C15 7.02944 13.6569 3 12 3C10.3431 3 9 7.02944 9 12C9 16.9706 10.3431 21 12 21Z" stroke="#242424" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#242424" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 12H21" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 691 B

45
index.html
View file

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