new styles with placeholder EN text
This commit is contained in:
John Hess
parent
e24293429a
commit
d510942558
10 changed files with 135 additions and 254 deletions
22
404.html
22
404.html
|
|
@ -3,26 +3,12 @@ permalink: /404
|
|||
layout: default
|
||||
---
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
html, body, main {
|
||||
height: 100%;
|
||||
}
|
||||
.page-content {
|
||||
padding: 30px 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 30px 0;
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-content text-center">
|
||||
<img src="{{site.baseurl}}/assets/images/butter-logo-feature-large.svg" alt="Butter App Feature Logo" />
|
||||
<div class="content">
|
||||
<div class="card">
|
||||
<h1>404</h1>
|
||||
<br/>
|
||||
<p><strong>Page not found :(</strong></p>
|
||||
<p>The requested page could not be found.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<header class="header-area">
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="header-area-wrapper">
|
||||
<div class="header-menu">
|
||||
|
|
@ -14,4 +14,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<img src="/assets/images/paddy.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
|
||||
<div class="header-title">Welcome to the Butter Box</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -21,8 +21,6 @@ body {
|
|||
}
|
||||
|
||||
.main-area {
|
||||
min-width: 375px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@
|
|||
// Body Styles
|
||||
// -------------------------
|
||||
body {
|
||||
background-color: $gold;
|
||||
background-image: url("/assets/images/btr-texture.png");
|
||||
background-size: 170px;
|
||||
background-color: #FFFCEC;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Link Styles
|
||||
// -------------------------
|
||||
|
|
@ -34,19 +33,34 @@ a:active {
|
|||
.darklink:link {
|
||||
color: grey;
|
||||
}
|
||||
.darklink:visited {
|
||||
color: grey;
|
||||
}
|
||||
.darklink:hover {
|
||||
color: grey;
|
||||
}
|
||||
.darklink:active {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Header Styles
|
||||
// Content Styles
|
||||
// -------------------------
|
||||
.header-area {
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
background-color: $gold;
|
||||
background-image: url("/assets/images/btr-texture.png");
|
||||
background-size: 170px;
|
||||
padding: 0 0 100px 0;
|
||||
text-align: center;
|
||||
border-radius: 0 0 20px 20px;
|
||||
z-index: 1;
|
||||
|
||||
// Language selector
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -54,7 +68,6 @@ a:active {
|
|||
flex-direction: column;
|
||||
}
|
||||
.header-menu {
|
||||
margin-top: 20px;
|
||||
&-list {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
|
@ -64,160 +77,63 @@ a:active {
|
|||
font-weight: 600;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: 45px;
|
||||
}
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// -------------------------
|
||||
// Content Styles
|
||||
// -------------------------
|
||||
.content-area {
|
||||
background-color: white;
|
||||
// This makes the radius as large as a pill shape can be.
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
padding-bottom: Min(50vw, 250px);
|
||||
&-topper {
|
||||
margin-top: 175px;
|
||||
// The content below the topper shouldn't be too high or too low.
|
||||
height: Min(Max(50vw, 175px), 250px);
|
||||
text-align: center;
|
||||
.header-content {
|
||||
position: relative;
|
||||
// Keep Paddy just cresting the top.
|
||||
top: calc(-20px - Min(Max(50vw, 175px), 250px) * .3);
|
||||
.topper-img {
|
||||
width: 40%;
|
||||
height: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
.content-title {
|
||||
margin-top: 25px;
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
@media (max-width: 500px) {
|
||||
font-size: 28px;
|
||||
|
||||
.header-image {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-wrapper {
|
||||
margin-bottom: 30px;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
.content-subtitle {
|
||||
font-size: 20px;
|
||||
|
||||
.header-title {
|
||||
font-size: 1.5em;
|
||||
color: #333;
|
||||
margin: 20px 0;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
.split-content {
|
||||
display: flex;
|
||||
}
|
||||
.left-content {
|
||||
width: 65%;
|
||||
}
|
||||
.right-content {
|
||||
width: 65%;
|
||||
}
|
||||
.right-bleed {
|
||||
width: 35%;
|
||||
img {
|
||||
width: calc(100% + 40px);
|
||||
}
|
||||
}
|
||||
.left-img {
|
||||
width: 35%;
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.content-text {
|
||||
text-align: left;
|
||||
}
|
||||
// Expander per: https://www.digitalocean.com/community/tutorials/css-collapsible
|
||||
input[type='checkbox'] {
|
||||
display:none;
|
||||
}
|
||||
.outlink {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.outlink::after {
|
||||
content: url("/assets/images/btr-carrot.svg");
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.lbl-toggle {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.lbl-toggle::after {
|
||||
content: url("/assets/images/btr-carrot.svg");
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transform: rotate(180deg);
|
||||
transition: transform .25s ease-out;
|
||||
}
|
||||
.content-expander {
|
||||
border-bottom-color: $light-gray;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
span {
|
||||
// Take up space so ::after is on the right
|
||||
display: inline-block;
|
||||
width: 94%;
|
||||
}
|
||||
}
|
||||
.toggle:checked + .lbl-toggle + .content-expanded {
|
||||
max-height: 100vh;
|
||||
overflow: visible;
|
||||
display: inherit;
|
||||
}
|
||||
.toggle:checked + .lbl-toggle::after {
|
||||
transform: rotate(360deg) translate(0, -2px);
|
||||
}
|
||||
.toggle:checked + .content-expander {
|
||||
border-bottom: none;
|
||||
}
|
||||
.content-expanded {
|
||||
max-height: 0px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
transition: max-height .5s ease-in-out;
|
||||
width: 100%;
|
||||
padding: 0 10px 20px 10px;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 5px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
border-bottom-color: $light-gray;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
.content-img {
|
||||
img {
|
||||
margin-top: 10px;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
left: -40px;
|
||||
// Bleed to the edges of the main section.
|
||||
width: calc(100% + 80px);
|
||||
height: auto;
|
||||
top: -100px;
|
||||
padding: 20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 32px; /* Desired width */
|
||||
height: 32px; /* Desired height */
|
||||
margin-bottom: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-icon-big {
|
||||
width: 60px; /* Desired width */
|
||||
height: 60px; /* Desired height */
|
||||
margin-bottom: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// -------------------------
|
||||
|
|
|
|||
BIN
assets/images/appstore-icon.png
Normal file
BIN
assets/images/appstore-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/explore-icon.png
Normal file
BIN
assets/images/explore-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
assets/images/maps-icon.png
Normal file
BIN
assets/images/maps-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
assets/images/message-icon.png
Normal file
BIN
assets/images/message-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
36
assets/images/paddy.svg
Normal file
36
assets/images/paddy.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1237_25463)">
|
||||
<path
|
||||
d="M72.9953 44.3183L66.695 43.6072C66.2117 43.5617 65.8545 43.1203 65.8965 42.6404L66.0366 41.5124L66.0681 41.2917C66.2957 39.7714 66.6039 37.6906 65.2241 35.75C64.8108 35.1965 64.1839 34.643 63.4485 34.1736V25.0903C63.4485 23.1461 62.4714 21.3351 60.8219 20.2351L43.1012 8.93793C41.1856 7.68736 38.7131 7.68736 36.8044 8.93793L19.0382 20.2702C17.4202 21.3106 16.4116 23.1567 16.4116 25.0903V34.2787C15.9528 34.5554 15.5956 34.7831 15.3645 34.9548C13.2352 36.4015 13.2912 39.0358 13.3192 40.4615L13.3928 42.5563C13.4698 43.341 12.9235 44.0381 12.146 44.1432L6.25195 45.5409C5.47798 45.7511 4.82659 46.245 4.41684 46.9351C4.00359 47.6322 3.89152 48.4414 4.09815 49.2155C4.53591 50.8304 6.18191 51.7973 7.74735 51.3734L14.2053 49.9547C14.678 49.8566 16.0053 49.6009 16.4431 49.5729C16.9614 49.5378 17.4762 49.7305 17.886 50.1158C18.3833 50.5817 18.681 51.2683 18.681 51.9549V59.3463C18.6915 60.7405 19.8261 61.8684 21.22 61.8684C22.6138 61.8684 23.7485 60.7369 23.759 59.3463V50.0002C23.759 49.762 23.9446 49.5764 24.1793 49.5764C24.2458 49.5834 24.3089 49.6219 24.6416 49.8811C24.8342 50.0317 25.1003 50.2419 25.4786 50.5082L26.9915 51.5626L27.2752 51.7762L27.3137 51.8008C27.4257 51.8708 27.5063 52.025 27.4923 52.1406V68.6187H27.4888V68.6713C27.5168 70.5068 29.0192 71.9956 30.8613 71.9956C32.7034 71.9956 34.1358 70.5769 34.2268 68.7974H34.2374V56.3967C34.2374 56.2811 34.3039 56.2076 34.409 56.19C34.5 56.2356 34.6471 56.3267 34.6471 56.3267L37.0461 57.8084C37.8936 58.3409 38.8742 58.6071 39.8547 58.6071C40.8353 58.6071 41.8229 58.3409 42.688 57.8084L52.0666 52.025C52.1962 51.9479 52.3643 51.9094 52.5079 51.9094C53.1138 51.9339 53.6006 52.4313 53.6006 53.0408V62.7056C53.6146 64.1244 54.7703 65.2768 56.1921 65.2768C57.614 65.2768 58.7872 64.1139 58.7872 62.6811V56.8171C58.7872 53.0268 61.862 49.9407 65.6478 49.9232L72.533 50.4171C74.2911 50.5432 75.8495 49.2891 75.9791 47.6182C76.1051 45.9648 74.7603 44.4795 72.9848 44.3113L72.9953 44.3183Z"
|
||||
fill="#FCE364" />
|
||||
<path
|
||||
d="M72.9953 44.3183L66.695 43.6072C66.2117 43.5617 65.8545 43.1203 65.8965 42.6404L66.0366 41.5124L66.0681 41.2917C66.2957 39.7714 66.6039 37.6906 65.2241 35.75C64.8108 35.1965 64.1839 34.643 63.4485 34.1736V25.0903C63.4485 23.1461 62.4714 21.3351 60.8219 20.2351L43.1012 8.93793C41.1856 7.68736 38.7131 7.68736 36.8044 8.93793L19.0382 20.2702C17.4202 21.3106 16.4116 23.1567 16.4116 25.0903V34.2787C15.9528 34.5554 15.5956 34.7831 15.3645 34.9548C13.2352 36.4015 13.2912 39.0358 13.3192 40.4615L13.3928 42.5563C13.4698 43.341 12.9235 44.0381 12.146 44.1432L6.25195 45.5409C5.47798 45.7511 4.82659 46.245 4.41684 46.9351C4.00359 47.6322 3.89152 48.4414 4.09815 49.2155C4.53591 50.8304 6.18191 51.7973 7.74735 51.3734L14.2053 49.9547C14.678 49.8566 16.0053 49.6009 16.4431 49.5729C16.9614 49.5378 17.4762 49.7305 17.886 50.1158C18.3833 50.5817 18.681 51.2683 18.681 51.9549V59.3463C18.6915 60.7405 19.8261 61.8684 21.22 61.8684C22.6138 61.8684 23.7485 60.7369 23.759 59.3463V50.0002C23.759 49.762 23.9446 49.5764 24.1793 49.5764C24.2458 49.5834 24.3089 49.6219 24.6416 49.8811C24.8342 50.0317 25.1003 50.2419 25.4786 50.5082L26.9915 51.5626L27.2752 51.7762L27.3137 51.8008C27.4257 51.8708 27.5063 52.025 27.4923 52.1406V68.6187H27.4888V68.6713C27.5168 70.5068 29.0192 71.9956 30.8613 71.9956C32.7034 71.9956 34.1358 70.5769 34.2268 68.7974H34.2374V56.3967C34.2374 56.2811 34.3039 56.2076 34.409 56.19C34.5 56.2356 34.6471 56.3267 34.6471 56.3267L37.0461 57.8084C37.8936 58.3409 38.8742 58.6071 39.8547 58.6071C40.8353 58.6071 41.8229 58.3409 42.688 57.8084L52.0666 52.025C52.1962 51.9479 52.3643 51.9094 52.5079 51.9094C53.1138 51.9339 53.6006 52.4313 53.6006 53.0408V62.7056C53.6146 64.1244 54.7703 65.2768 56.1921 65.2768C57.614 65.2768 58.7872 64.1139 58.7872 62.6811V56.8171C58.7872 53.0268 61.862 49.9407 65.6478 49.9232L72.533 50.4171C74.2911 50.5432 75.8495 49.2891 75.9791 47.6182C76.1051 45.9648 74.7603 44.4795 72.9848 44.3113L72.9953 44.3183ZM74.9284 47.5446C74.8444 48.634 73.8043 49.4432 72.617 49.3627L65.6864 48.8652C61.2982 48.8652 57.7295 52.4348 57.7295 56.8241V62.6881C57.7295 63.5323 57.0431 64.2154 56.2026 64.2154C55.3621 64.2154 54.6757 63.5288 54.6757 62.6881V53.0443C54.6757 51.9234 53.8352 50.9986 52.753 50.862C52.753 50.862 52.732 50.862 52.7215 50.8585C52.641 50.8479 52.5569 50.8444 52.4729 50.8444C52.1752 50.8479 51.8705 50.918 51.6324 51.0546L42.1416 56.9082C40.7513 57.7594 38.9792 57.7629 37.6204 56.9082L35.1129 55.3563C35.1129 55.3563 34.7277 55.1251 34.4615 55.1251C33.7436 55.1251 33.1832 55.6856 33.1832 56.4037V68.6292C33.1832 69.9043 32.1466 70.9377 30.8753 70.9377C29.6041 70.9377 28.5744 69.9078 28.5674 68.6397V52.2351C28.6095 51.7272 28.3503 51.2053 27.9125 50.918L26.1054 49.6429C25.7517 49.3907 25.5101 49.2015 25.314 49.0474C24.9007 48.7251 24.6451 48.529 24.2003 48.5184C24.2003 48.5184 24.1898 48.5184 24.1828 48.5184C24.1758 48.5184 24.1723 48.5184 24.1653 48.5184C23.3598 48.5395 22.7084 49.198 22.7084 50.0107L22.7014 59.3392C22.7014 60.1484 22.043 60.807 21.234 60.807C20.425 60.807 19.7666 60.1484 19.7666 59.3392L19.7596 51.9654C19.7596 50.9881 19.3359 50.0072 18.6284 49.3452C17.998 48.7567 17.2031 48.4624 16.3871 48.5184C15.7987 48.557 14.1877 48.8828 13.9951 48.9213L7.50571 50.347C6.48659 50.6238 5.42195 49.9932 5.13828 48.9458C5.0052 48.4519 5.07874 47.9369 5.3449 47.4886C5.61106 47.0402 6.03482 46.7179 6.52161 46.5848L12.125 45.2641L12.3386 45.2046C13.6659 45.0049 14.5975 43.8104 14.4644 42.4968L14.3944 40.444C14.3593 38.7661 14.4504 36.8849 15.9913 35.834C16.2645 35.6309 16.7443 35.3366 17.2241 35.0459L17.4832 34.8917V25.1008C17.4832 23.528 18.3027 22.0252 19.616 21.181L37.3823 9.8312C38.9442 8.81182 40.9579 8.81182 42.5234 9.8312L60.2441 21.1249C61.5854 22.0182 62.3874 23.4999 62.3874 25.0868V34.7726L62.65 34.9268C63.382 35.3611 63.9983 35.8796 64.3696 36.377C65.4937 37.9569 65.2311 39.7189 65.021 41.1341L64.8423 42.5248C64.7443 43.5932 65.5112 44.5425 66.5584 44.6616L72.8902 45.3762C74.0984 45.4918 75.016 46.4622 74.9319 47.5411L74.9284 47.5446Z"
|
||||
fill="#050507" />
|
||||
<path
|
||||
d="M45.6156 38.2761C47.0024 40.3744 43.6614 52.1726 39.7881 52.1726C35.0287 52.1726 32.6472 40.1257 33.9255 38.2761C34.6364 37.2462 36.377 39.3761 39.9667 39.3761C43.3077 39.3761 44.9047 37.1727 45.6156 38.2761Z"
|
||||
fill="#050507" />
|
||||
<path
|
||||
d="M25.685 46.4495C28.8049 46.4495 31.334 44.4295 31.334 41.9377C31.334 39.4458 28.8049 37.4258 25.685 37.4258C22.5652 37.4258 20.0361 39.4458 20.0361 41.9377C20.0361 44.4295 22.5652 46.4495 25.685 46.4495Z"
|
||||
fill="#FDF4B8" />
|
||||
<path
|
||||
d="M53.8945 46.4495C57.0143 46.4495 59.5434 44.4295 59.5434 41.9377C59.5434 39.4458 57.0143 37.4258 53.8945 37.4258C50.7747 37.4258 48.2456 39.4458 48.2456 41.9377C48.2456 44.4295 50.7747 46.4495 53.8945 46.4495Z"
|
||||
fill="#FDF4B8" />
|
||||
<path
|
||||
d="M37.3365 31.3093L24.5468 23.4205C23.8008 22.9581 23.8008 21.8582 24.5468 21.3958L37.3365 13.507C38.8984 12.5472 40.8526 12.5472 42.4181 13.507L55.2078 21.3958C55.9537 21.8582 55.9537 22.9581 55.2078 23.4205L42.4181 31.3093C40.8561 32.2691 38.8669 32.2691 37.3365 31.3093Z"
|
||||
fill="#FDF4B8" />
|
||||
<path
|
||||
d="M38.4747 50.324C36.8042 49.0454 37.2665 44.4599 40.2153 43.9275C42.7018 43.4651 43.875 44.2813 42.313 47.6231C40.7511 51.0701 39.2592 50.8915 38.4747 50.324Z"
|
||||
fill="#FDF4B8" />
|
||||
<path
|
||||
d="M58.122 35.079C58.973 35.2927 59.6489 34.4029 59.0465 33.8354C58.157 33.0542 56.595 31.8457 53.8249 31.8457C51.0547 31.8457 49.4542 33.0542 48.4246 33.8704C47.7137 34.4379 48.4246 35.3978 49.3492 35.149C50.5924 34.8303 52.1929 34.0491 53.8984 34.0491C55.6039 34.1192 57.0608 34.8303 58.1255 35.079H58.122Z"
|
||||
fill="#050507" />
|
||||
<path
|
||||
d="M30.2694 35.079C31.1204 35.2927 31.7963 34.4029 31.194 33.8354C30.3044 33.0542 28.7425 31.8457 25.9723 31.8457C23.2021 31.8457 21.6017 33.0542 20.5721 33.8704C19.8611 34.4379 20.5721 35.3978 21.4966 35.149C22.7399 34.8303 24.3403 34.0491 26.0459 34.0491C27.7864 34.1192 29.2083 34.8303 30.2729 35.079H30.2694Z"
|
||||
fill="#050507" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1237_25463">
|
||||
<rect width="72" height="64" fill="white" transform="translate(4 8)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.3 KiB |
85
index.html
85
index.html
|
|
@ -4,84 +4,25 @@ layout: default
|
|||
|
||||
{% assign page_data = site.data.home %}
|
||||
|
||||
<section class="content-area">
|
||||
<div class="container">
|
||||
<div class="content-area-topper">
|
||||
<img class="topper-img" src="{{site.baseurl}}{{ page_data.page_logo }}" alt="{% t page_logo_alt %}" />
|
||||
<h1 class="content-title mb-2 mt-2">{% t butter_box_title %}</h1>
|
||||
<div class="content">
|
||||
<div class="card">
|
||||
<img src="/assets/images/explore-icon.png" alt="Explore Icon" class="card-icon-big">
|
||||
Explore
|
||||
</div>
|
||||
<div class="content-area-wrapper">
|
||||
<p class="content-subtitle text-black ls-40 mb-2">{% t apps_subtitle %}</p>
|
||||
<p class="content-text text-black ls-40 mb-2">{% t apps_text %}</p>
|
||||
<a class="btn-main btn-modal btn-slim" href="#" data-micromodal-trigger="product-modal">
|
||||
<div class="btn-split">
|
||||
<div class="btn-logo">
|
||||
<img class="btn-android" src="/assets/images/btr-android.svg">
|
||||
<div class="card">
|
||||
<img src="/assets/images/message-icon.png" alt="Message Icon" class="card-icon">
|
||||
Message Board
|
||||
</div>
|
||||
<div class="btn-text">
|
||||
<span class="button-main-text">{% t fdroid_button_text %}</span><br/>
|
||||
<span class="button-sub-text">{% t fdroid_button_subtext %}</span>
|
||||
<div class="card">
|
||||
<img src="/assets/images/appstore-icon.png" alt="App Store Icon" class="card-icon">
|
||||
App store
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<input id="apps-expander" class="toggle" type="checkbox">
|
||||
<label for="apps-expander" class="lbl-toggle content-expander">
|
||||
<span>{% t apps_expander_text %}</span>
|
||||
</label>
|
||||
<div class="content-expanded">
|
||||
<p class="mb-2">{% t apps_expanded_text %}</p>
|
||||
<div class="content-img">
|
||||
<img src="{{site.baseurl}}{{ page_data.app_tiles_image }}" alt="{% t app_tiles_image_alt %}" />
|
||||
<div class="card">
|
||||
<img src="/assets/images/maps-icon.png" alt="Maps Icon" class="card-icon">
|
||||
Offline maps
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if site.data.deployment.show_chat %}
|
||||
<div class="content-area-wrapper">
|
||||
<div class="split-content">
|
||||
<div class="left-content">
|
||||
<p class="content-subtitle text-black ls-40 mb-2">{% t chat_subtitle %}</p>
|
||||
<p class="content-text text-black ls-40 mb-2">{% t chat_text %}</p>
|
||||
<a class="btn-main uppercase" href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}">{% t chat_button_text %}</a>
|
||||
</div>
|
||||
<div class="right-bleed">
|
||||
<img src="/assets/images/btr-convene.png" alt="{% t chat_image_alt %}" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="/chat/#/createroom">
|
||||
<div class="outlink content-expander">
|
||||
<span>{% t chat_secondary_cta %}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if site.data.deployment.show_ipfs %}
|
||||
<div class="content-area-wrapper">
|
||||
<div class="split-content">
|
||||
<div class="left-img">
|
||||
<img src="/assets/images/btr-ipfs.png" alt="{% t ipfs_image_alt %}" />
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<p class="content-subtitle text-black ls-40 mb-2">{% t ipfs_subtitle %}</p>
|
||||
<p class="content-text text-black ls-40 mb-2">{% t ipfs_text %}</p>
|
||||
<a class="btn-main uppercase" href="upload.html">{% t ipfs_button_text %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
|
||||
<div id="usb-butter" class="content-area-wrapper" style="display: none;">
|
||||
<div class="split-content">
|
||||
<div class="left-img">
|
||||
<img src="/assets/images/placeholder-file-folder.webp" alt="{% t file_folder_image_alt %}" />
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<p class="content-subtitle text-black ls-40 mb-2">{% t file_folder_title %}</p>
|
||||
<p class="content-text text-black ls-40 mb-2">{% t file_folder_text %}</p>
|
||||
<a class="btn-main uppercase" href="/usb-butter/">{% t file_folder_cta %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include modal.html %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue