Merge branch 'ui-refresh' into 'butter-box'
UI Refresh See merge request guardianproject/wind/butter-app-site!24
This commit is contained in:
John Hess
commit
13971ac592
13 changed files with 276 additions and 86 deletions
|
|
@ -1,3 +1,6 @@
|
|||
# Deployment-specific variables to specify what features to surface.
|
||||
has_internet: false
|
||||
show_chat: true
|
||||
# The standard dnsmasq config includes butterbox.lan even when a non-EN language
|
||||
# is selected so this should work even when the user-visible domain is different.
|
||||
chat_server: "butterbox.lan"
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
# This file is sitewide, for all languages.
|
||||
# To specify per-language data, use the _i18n folder's yml files.
|
||||
|
||||
page_logo: '/assets/images/butter-logo-feature-large.svg'
|
||||
app_tiles_image: '/assets/images/butter-collection-features-offline-essentials.svg'
|
||||
page_logo: '/assets/images/btr-logo.svg'
|
||||
app_tiles_image: '/assets/images/btr-apps.png'
|
||||
|
||||
modal:
|
||||
butter_app_logo: '/assets/images/butter-app-icon-large.svg'
|
||||
|
|
|
|||
|
|
@ -1,14 +1,6 @@
|
|||
<header class="header-area">
|
||||
<div class="container">
|
||||
<div class="header-area-wrapper">
|
||||
<div class="header-logo">
|
||||
<a href="{{'/' | relative_url}}">
|
||||
<img src="{{ site.logo }}" alt="Butter App Logo" />
|
||||
</a>
|
||||
<div class="header-logo-text">
|
||||
<p class="">{{ site.data.home.site_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<ul class="header-menu-list ls-40">
|
||||
{% for lang in site.languages %}
|
||||
|
|
|
|||
|
|
@ -20,12 +20,17 @@ body {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
min-width: 375px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
// General container
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -45,15 +50,14 @@ body {
|
|||
.btn-main {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: $royal-blue;
|
||||
border: 1px solid $royal-blue;
|
||||
background-color: $gold;
|
||||
border: 1px solid $gold;
|
||||
padding: 1.8em 3.4em;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
|
|
@ -61,21 +65,48 @@ body {
|
|||
border-radius: 50rem;
|
||||
transition: all .3s ease;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
&:hover {
|
||||
background-color: lighten($royal-blue, 5%);
|
||||
background-color: lighten($gold, 5%);
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
.btn-split {
|
||||
display: inline-flex;
|
||||
.btn-logo {
|
||||
margin: auto 0px;
|
||||
height: 60px;
|
||||
}
|
||||
.btn-text {
|
||||
border-left: 1pt;
|
||||
border-left-color: black;
|
||||
border-left-style: solid;
|
||||
text-align: left;
|
||||
padding: 12px 20px;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
.button-main-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.button-sub-text {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-main.btn-slim {
|
||||
padding: .5em 2.5em;
|
||||
}
|
||||
|
||||
|
||||
// Text utility classes
|
||||
.content-text {
|
||||
font-family: $text-font-family;
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.caption {
|
||||
|
|
@ -97,13 +128,17 @@ body {
|
|||
letter-spacing: .4px;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
// Spacing utility classes
|
||||
.mb-2 {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 24px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
$dark-gray: #242424;
|
||||
$light-gray: #EEE;
|
||||
|
||||
// Brand colors
|
||||
$gold: #FFDF3F;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
// -------------------------
|
||||
body {
|
||||
background-color: $gold;
|
||||
background-image: url("/assets/images/btr-texture.png");
|
||||
background-size: 170px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
|
@ -11,22 +13,22 @@ body {
|
|||
// -------------------------
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:active {
|
||||
text-decoration: underline;
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.darklink:link {
|
||||
|
|
@ -49,27 +51,10 @@ a:active {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 40px;
|
||||
@media (max-width: 576px) {
|
||||
flex-direction: column;
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
.header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-text {
|
||||
margin-left: 15px;
|
||||
p {
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
flex-direction: column;
|
||||
}
|
||||
.header-menu {
|
||||
@media (max-width: 576px) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
margin-top: 20px;
|
||||
&-list {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
|
@ -91,36 +76,149 @@ a:active {
|
|||
// Content Styles
|
||||
// -------------------------
|
||||
.content-area {
|
||||
&-wrapper {
|
||||
margin-top: 30px;
|
||||
min-height: calc(100vh - 202px); // take up space above the footer
|
||||
margin-bottom: 30px;
|
||||
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;
|
||||
position:relative;
|
||||
// Keep Paddy just cresting the top.
|
||||
top: calc(-20px - Min(Max(50vw, 175px), 250px) * .3);
|
||||
.topper-img {
|
||||
width: 40%;
|
||||
height: auto;
|
||||
}
|
||||
.content-title {
|
||||
font-size: 42px;
|
||||
margin-top: 25px;
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
@media (max-width: 768px) {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
.content-text {
|
||||
br {
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-img {
|
||||
margin: 55px 0 45px;
|
||||
@media (max-width: 768px) {
|
||||
margin: 40px 0;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 70%;
|
||||
@media (max-width: 500px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-wrapper {
|
||||
margin-bottom: 30px;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
.content-subtitle {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
.split-content {
|
||||
display: flex;
|
||||
}
|
||||
.left-content {
|
||||
width: 65%;
|
||||
}
|
||||
.right-bleed {
|
||||
width: 35%;
|
||||
img {
|
||||
width: calc(100% + 40px);
|
||||
}
|
||||
}
|
||||
.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;
|
||||
position: relative;
|
||||
left: -40px;
|
||||
// Bleed to the edges of the main section.
|
||||
width: calc(100% + 80px);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------
|
||||
// Button Styles
|
||||
// -------------------------
|
||||
|
||||
.btn-android {
|
||||
margin: 15px 15px 15px 0px;
|
||||
height: 30px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -129,7 +227,6 @@ a:active {
|
|||
// -------------------------
|
||||
.footer-area {
|
||||
font-family: $footer-font-family;
|
||||
background-color: $shade-gold;
|
||||
padding: 35px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
10
assets/images/btr-android.svg
Normal file
10
assets/images/btr-android.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_13_4307)">
|
||||
<path d="M6 8L6.001 17.444C6.001 18.305 6.697 19 7.558 19H8V22.542C8 23.346 8.707 24 9.51 24C10.316 24 11 23.346 11 22.541V19H13V22.542C13 23.346 13.707 24 14.511 24C15.317 24 16 23.346 16 22.541V19L16.444 18.999C17.302 18.999 18 18.303 18 17.442V8H6ZM22 9.471C22 8.666 21.305 8 20.5 8C19.695 7.999 19 8.667 19 9.472V15.578C19 16.384 19.694 17 20.5 17C21.305 17 22 16.385 22 15.578V9.471ZM5 9.471C5 8.666 4.305 8 3.5 8C2.695 7.999 2 8.667 2 9.472V15.578C2 16.384 2.694 17 3.5 17C4.305 17 5 16.385 5 15.578V9.471ZM14.951 2.159L15.891 0.3C15.959 0.168 15.872 0 15.728 0C15.662 0 15.598 0.038 15.564 0.105L14.615 1.983C13.084 1.246 11.071 1.171 9.386 1.983L8.436 0.105C8.403 0.038 8.339 0 8.272 0C8.128 0 8.041 0.168 8.109 0.3L9.049 2.159C7.204 3.193 6 4.743 6 6.999H18C18 4.743 16.796 3.193 14.951 2.159ZM9.501 5C9.225 5 9 4.776 9 4.5C9 4.226 9.225 4 9.501 4C9.777 4 10 4.226 10 4.5C10 4.776 9.777 5 9.501 5ZM14.499 5C14.223 5 14 4.776 14 4.5C14 4.226 14.223 4 14.499 4C14.775 4 15 4.226 15 4.5C15 4.776 14.775 5 14.499 5Z" fill="#242424"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_13_4307">
|
||||
<rect width="24" height="24" rx="12" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/btr-apps.png
Normal file
BIN
assets/images/btr-apps.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
3
assets/images/btr-carrot.svg
Normal file
3
assets/images/btr-carrot.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.657583 7.07747C0.513377 6.95395 0.459659 6.7042 0.531754 6.52675C0.559386 6.48891 0.595481 6.44509 0.645561 6.38502L0.652038 6.37726C0.697927 6.32224 0.757349 6.251 0.812113 6.17428L6.20818 0.778192C6.25741 0.728966 6.29964 0.687251 6.34237 0.652299C6.36274 0.635641 6.37835 0.624626 6.38925 0.617908C6.3923 0.616027 6.39454 0.614757 6.39598 0.613973L6.4537 0.594779L6.50951 0.557591C6.6246 0.480906 6.83063 0.480679 6.94648 0.557644C7.04095 0.620752 7.10315 0.680693 7.24732 0.825193L7.24773 0.825603L12.8172 6.39504C12.8864 6.46433 12.9464 6.59601 12.9532 6.76456C12.9236 6.9298 12.823 7.05572 12.6636 7.13042C12.5307 7.16728 12.361 7.13768 12.2717 7.07878C12.2053 7.01197 12.0982 6.90613 11.9718 6.82477C10.9154 5.73837 9.83608 4.66939 8.75392 3.59761C8.20415 3.05311 7.65364 2.50789 7.10505 1.95929L6.75637 1.61061L6.40288 1.95442C5.23235 3.09293 4.08021 4.25572 2.93891 5.40758C2.37468 5.97703 1.8131 6.54381 1.25325 7.10366L1.25324 7.10366C1.12988 7.22702 0.864342 7.25844 0.661654 7.081L0.661673 7.08098L0.657583 7.07747Z" fill="black" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/images/btr-convene.png
Normal file
BIN
assets/images/btr-convene.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
18
assets/images/btr-logo.svg
Normal file
18
assets/images/btr-logo.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="157" height="140" viewBox="0 0 157 140" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_13_4269)">
|
||||
<path d="M150.448 79.4483L136.71 77.8927C135.656 77.7931 134.877 76.8276 134.969 75.7778L135.274 73.3103L135.343 72.8276C135.839 69.5019 136.511 64.9502 133.502 60.705C132.601 59.4943 131.234 58.2835 129.631 57.2567V37.387C129.631 33.1341 127.5 29.1724 123.903 26.7663L85.2622 2.05365C81.085 -0.681985 75.6936 -0.681985 71.5316 2.05365L32.7914 26.8429C29.2633 29.1188 27.064 33.1571 27.064 37.387V57.4866C26.0636 58.092 25.2846 58.59 24.7806 58.9655C20.1376 62.1303 20.2598 67.8927 20.3209 71.0115L20.4812 75.5939C20.6492 77.3103 19.4579 78.8353 17.7626 79.0651L4.9103 82.1226C3.22262 82.5824 1.80222 83.6628 0.908743 85.1724C0.00762921 86.6973 -0.236741 88.4674 0.213816 90.1609C1.16839 93.6935 4.75757 95.8084 8.17111 94.8812L22.2529 91.7778C23.2839 91.5632 26.1781 91.0038 27.1327 90.9425C28.2629 90.8659 29.3855 91.2874 30.2789 92.1303C31.3633 93.1494 32.0124 94.6513 32.0124 96.1533V112.322C32.0354 115.372 34.5096 117.839 37.5489 117.839C40.5883 117.839 43.0625 115.364 43.0854 112.322V91.8774C43.0854 91.3563 43.4902 90.9502 44.0018 90.9502C44.1469 90.9655 44.2844 91.0498 45.0099 91.6169C45.4299 91.9464 46.0103 92.4061 46.835 92.9885L50.134 95.295L50.7526 95.7625L50.8366 95.8161C51.0809 95.9694 51.2566 96.3065 51.226 96.5594V132.605H51.2184V132.72C51.2795 136.736 54.5556 139.992 58.5724 139.992C62.5892 139.992 65.7126 136.889 65.9111 132.996H65.934V105.87C65.934 105.617 66.0791 105.456 66.3082 105.418C66.5068 105.517 66.8275 105.716 66.8275 105.716L72.0586 108.958C73.9066 110.123 76.0448 110.705 78.1831 110.705C80.3213 110.705 82.4748 110.123 84.361 108.958L104.812 96.3065C105.094 96.1379 105.461 96.0536 105.774 96.0536C107.095 96.1073 108.157 97.1954 108.157 98.5287V119.671C108.187 122.774 110.707 125.295 113.808 125.295C116.908 125.295 119.466 122.751 119.466 119.617V106.789C119.466 98.4981 126.171 91.7471 134.426 91.7088L149.44 92.7893C153.273 93.0651 156.672 90.3218 156.954 86.6667C157.229 83.0498 154.297 79.8008 150.425 79.433L150.448 79.4483Z" fill="#FCE364"/>
|
||||
<path d="M150.448 79.4483L136.71 77.8927C135.656 77.7931 134.877 76.8276 134.969 75.7778L135.274 73.3103L135.343 72.8276C135.839 69.5019 136.511 64.9502 133.502 60.705C132.601 59.4943 131.234 58.2835 129.631 57.2567V37.387C129.631 33.1341 127.5 29.1724 123.903 26.7663L85.2622 2.05365C81.085 -0.681985 75.6936 -0.681985 71.5316 2.05365L32.7914 26.8429C29.2633 29.1188 27.064 33.1571 27.064 37.387V57.4866C26.0636 58.092 25.2846 58.59 24.7806 58.9655C20.1376 62.1303 20.2598 67.8927 20.3209 71.0115L20.4812 75.5939C20.6492 77.3103 19.4579 78.8353 17.7626 79.0651L4.9103 82.1226C3.22262 82.5824 1.80222 83.6628 0.908743 85.1724C0.00762921 86.6973 -0.236741 88.4674 0.213816 90.1609C1.16839 93.6935 4.75757 95.8084 8.17111 94.8812L22.2529 91.7778C23.2839 91.5632 26.1781 91.0038 27.1327 90.9425C28.2629 90.8659 29.3855 91.2874 30.2789 92.1303C31.3633 93.1494 32.0124 94.6513 32.0124 96.1533V112.322C32.0354 115.372 34.5096 117.839 37.5489 117.839C40.5883 117.839 43.0625 115.364 43.0854 112.322V91.8774C43.0854 91.3563 43.4902 90.9502 44.0018 90.9502C44.1469 90.9655 44.2844 91.0498 45.0099 91.6169C45.4299 91.9464 46.0103 92.4061 46.835 92.9885L50.134 95.295L50.7526 95.7625L50.8366 95.8161C51.0809 95.9694 51.2566 96.3065 51.226 96.5594V132.605H51.2184V132.72C51.2795 136.736 54.5556 139.992 58.5724 139.992C62.5892 139.992 65.7126 136.889 65.9111 132.996H65.934V105.87C65.934 105.617 66.0791 105.456 66.3082 105.418C66.5068 105.517 66.8275 105.716 66.8275 105.716L72.0586 108.958C73.9066 110.123 76.0448 110.705 78.1831 110.705C80.3213 110.705 82.4748 110.123 84.361 108.958L104.812 96.3065C105.094 96.1379 105.461 96.0536 105.774 96.0536C107.095 96.1073 108.157 97.1954 108.157 98.5287V119.671C108.187 122.774 110.707 125.295 113.808 125.295C116.908 125.295 119.466 122.751 119.466 119.617V106.789C119.466 98.4981 126.171 91.7471 134.426 91.7088L149.44 92.7893C153.273 93.0651 156.672 90.3218 156.954 86.6667C157.229 83.0498 154.297 79.8008 150.425 79.433L150.448 79.4483ZM154.663 86.5058C154.48 88.8889 152.212 90.659 149.623 90.4828L134.51 89.3946C124.942 89.3946 117.16 97.2031 117.16 106.805V119.632C117.16 121.479 115.663 122.973 113.831 122.973C111.998 122.973 110.501 121.471 110.501 119.632V98.5364C110.501 96.0843 108.668 94.0613 106.309 93.7625C106.309 93.7625 106.263 93.7625 106.24 93.7548C106.064 93.7318 105.881 93.7241 105.698 93.7241C105.048 93.7318 104.384 93.8851 103.865 94.1839L83.1697 106.989C80.138 108.851 76.2739 108.858 73.3109 106.989L67.8432 103.594C67.8432 103.594 67.0032 103.088 66.4228 103.088C64.8573 103.088 63.6354 104.314 63.6354 105.885V132.628C63.6354 135.418 61.375 137.678 58.6029 137.678C55.8309 137.678 53.5857 135.425 53.5704 132.651V96.7663C53.6621 95.6552 53.097 94.5134 52.1424 93.8851L48.2019 91.0958C47.4307 90.5441 46.9037 90.1303 46.4761 89.7931C45.575 89.0881 45.0175 88.659 44.0477 88.636C44.0477 88.636 44.0247 88.636 44.0095 88.636C43.9942 88.636 43.9866 88.636 43.9713 88.636C42.2149 88.682 40.7945 90.1226 40.7945 91.9004L40.7792 112.307C40.7792 114.077 39.3435 115.517 37.5795 115.517C35.8154 115.517 34.3798 114.077 34.3798 112.307L34.3645 96.1762C34.3645 94.0383 33.4405 91.8927 31.8979 90.4445C30.5233 89.1571 28.7898 88.5134 27.0105 88.636C25.7276 88.7203 22.2147 89.433 21.7947 89.5172L7.64419 92.636C5.42195 93.2414 3.10044 91.8621 2.48187 89.5709C2.19168 88.4904 2.35205 87.364 2.93243 86.3831C3.51281 85.4023 4.43683 84.6973 5.49831 84.4061L17.7168 81.5172L18.1826 81.387C21.0769 80.9502 23.1082 78.3372 22.818 75.4636L22.6653 70.9732C22.5889 67.3027 22.7875 63.1877 26.1476 60.8889C26.7432 60.4444 27.7894 59.8008 28.8356 59.1648L29.4007 58.8276V37.41C29.4007 33.9694 31.1877 30.682 34.0514 28.8353L72.7917 4.00767C76.1976 1.77778 80.5886 1.77778 84.0021 4.00767L122.643 28.7127C125.568 30.6667 127.317 33.9081 127.317 37.3793V58.5671L127.889 58.9042C129.485 59.8544 130.829 60.9885 131.639 62.0766C134.09 65.5326 133.518 69.387 133.059 72.4828L132.67 75.5249C132.456 77.8621 134.128 79.9387 136.412 80.1992L150.219 81.7625C152.853 82.0153 154.854 84.1379 154.671 86.4981L154.663 86.5058Z" fill="#050507"/>
|
||||
<path d="M90.7452 66.2299C93.7693 70.8199 86.484 96.6284 78.0379 96.6284C67.6599 96.6284 62.467 70.2759 65.2543 66.2299C66.8046 63.977 70.5999 68.636 78.4274 68.636C85.7127 68.636 89.195 63.8161 90.7452 66.2299Z" fill="#050507"/>
|
||||
<path d="M47.2855 84.1073C54.0885 84.1073 59.6033 79.6885 59.6033 74.2376C59.6033 68.7867 54.0885 64.3678 47.2855 64.3678C40.4826 64.3678 34.9678 68.7867 34.9678 74.2376C34.9678 79.6885 40.4826 84.1073 47.2855 84.1073Z" fill="#FDF4B8"/>
|
||||
<path d="M108.798 84.1073C115.601 84.1073 121.116 79.6885 121.116 74.2376C121.116 68.7867 115.601 64.3678 108.798 64.3678C101.995 64.3678 96.4802 68.7867 96.4802 74.2376C96.4802 79.6885 101.995 84.1073 108.798 84.1073Z" fill="#FDF4B8"/>
|
||||
<path d="M72.6924 50.9885L44.8037 33.7318C43.1771 32.7203 43.1771 30.3142 44.8037 29.3027L72.6924 12.046C76.0983 9.94635 80.3595 9.94635 83.773 12.046L111.662 29.3027C113.288 30.3142 113.288 32.7203 111.662 33.7318L83.773 50.9885C80.3671 53.0881 76.0296 53.0881 72.6924 50.9885Z" fill="#FDF4B8"/>
|
||||
<path d="M75.1742 92.5824C71.5316 89.7855 72.5396 79.7548 78.9696 78.5901C84.3916 77.5786 86.9498 79.364 83.5439 86.6744C80.138 94.2146 76.8848 93.8238 75.1742 92.5824Z" fill="#FDF4B8"/>
|
||||
<path d="M118.016 59.2337C119.871 59.7012 121.345 57.7548 120.032 56.5134C118.092 54.8046 114.686 52.1609 108.646 52.1609C102.605 52.1609 99.1151 54.8046 96.8699 56.59C95.3197 57.8314 96.8699 59.931 98.886 59.387C101.597 58.6897 105.087 56.9808 108.806 56.9808C112.525 57.1341 115.702 58.6897 118.023 59.2337H118.016Z" fill="#050507"/>
|
||||
<path d="M57.2819 59.2337C59.1376 59.7012 60.6115 57.7548 59.298 56.5134C57.3583 54.8046 53.9524 52.1609 47.9119 52.1609C41.8714 52.1609 38.3815 54.8046 36.1363 56.59C34.5861 57.8314 36.1363 59.931 38.1524 59.387C40.8633 58.6897 44.3532 56.9808 48.0722 56.9808C51.8676 57.1341 54.9681 58.6897 57.2896 59.2337H57.2819Z" fill="#050507"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_13_4269">
|
||||
<rect width="157" height="140" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8 KiB |
BIN
assets/images/btr-texture.png
Normal file
BIN
assets/images/btr-texture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
59
index.html
59
index.html
|
|
@ -6,21 +6,52 @@ layout: default
|
|||
|
||||
<section class="content-area">
|
||||
<div class="container">
|
||||
<div class="content-area-wrapper text-center">
|
||||
<img src="{{site.baseurl}}{{ page_data.page_logo }}" alt="{% t page_logo_alt %}" />
|
||||
<h1 class="content-title mb-2 mt-2">{% t title %}</h1>
|
||||
<p class="content-text text-black ls-40 mb-2">
|
||||
{% t main_text %}
|
||||
</p>
|
||||
<div class="content-img">
|
||||
<img src="{{site.baseurl}}{{ page_data.app_tiles_image }}" alt="{% t app_tiles_image_alt %}" />
|
||||
<p class="caption ls-40 mb-2">{% t fdroid_apps_caption %}</p>
|
||||
</div>
|
||||
<a class="btn-main btn-modal" href="#" data-micromodal-trigger="product-modal">{% t fdroid_button_text %}</a>
|
||||
{% if site.data.deployment.show_chat %}
|
||||
<a class="btn-main btn-modal" href="/chat">{% t chat_button_text %}</a>
|
||||
{% endif %}
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</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 page_logo_alt %}" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="/chat/#/createroom"><div class="outlink content-expander">
|
||||
<span>{% t chat_secondary_cta %}</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue