styling updates; still needs assets/
This commit is contained in:
John Hess
parent
e0f232f049
commit
ddb9336a60
6 changed files with 159 additions and 84 deletions
24
_i18n/en.yml
24
_i18n/en.yml
|
|
@ -1,14 +1,20 @@
|
|||
site_name: 'Butter'
|
||||
page_logo_alt: 'Butter App Feature Logo'
|
||||
title: 'Life without internet made smoother. <br /> Get access to tools that help.'
|
||||
text:
|
||||
show_chat: |
|
||||
This Butter Box offers an Android app store and chat rooms. Download the Butter app to discover and download free, ad-free apps or to spread the love and share apps offline. Or, create a chat room which hangs on to messages while you're gone and delivers them whenever your device reconnects to the Butter Box.
|
||||
dont_show_chat: |
|
||||
Butter features a collection of apps to make life without the internet a little smoother. Use it to discover and download free, ad-free apps or to spread the love and share offline.
|
||||
fdroid_apps_caption: Just a few of the apps available via Butter
|
||||
fdroid_button_text: 'DOWNLOAD ANDROID APP'
|
||||
chat_button_text: 'CREATE A CHAT ROOM'
|
||||
title: 'Welcome to the Butter Box'
|
||||
|
||||
apps_subtitle: 'Get Android apps'
|
||||
apps_text: 'Download the Butter app to view a collection of apps that use less internet and battery.'
|
||||
fdroid_apps_caption: 'Just a few of the apps available via Butter'
|
||||
fdroid_button_text: 'Download Butter'
|
||||
fdroid_button_subtext: 'LESS THAN 10 MB'
|
||||
apps_expander_text: 'Which apps?'
|
||||
apps_expanded_text: 'Butter features apps for entertainment, sharing offline, navigating, taking pictures, and more!'
|
||||
|
||||
chat_subtitle: 'See what people are saying.'
|
||||
chat_text: 'Check the chat for messages, videos, or files from nearby peers.'
|
||||
chat_button_text: 'View Chat'
|
||||
chat_secondary_cta: 'Open my own chat room'
|
||||
|
||||
app_tiles_image_alt: 'Butter App features collection'
|
||||
view_all_apps: 'View All Apps'
|
||||
built_on_fdroid: Built on F-Droid Free Software
|
||||
|
|
|
|||
|
|
@ -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,16 @@ body {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
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 +49,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,8 +64,9 @@ body {
|
|||
border-radius: 50rem;
|
||||
transition: all .3s ease;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background-color: lighten($royal-blue, 5%);
|
||||
background-color: lighten($gold, 5%);
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -100,10 +104,10 @@ body {
|
|||
|
||||
// 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: #D9D9D9;
|
||||
|
||||
// Brand colors
|
||||
$gold: #FFDF3F;
|
||||
|
|
|
|||
|
|
@ -11,22 +11,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 +49,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,33 +74,109 @@ a:active {
|
|||
// Content Styles
|
||||
// -------------------------
|
||||
.content-area {
|
||||
background-color: white;
|
||||
border-top-left-radius: 50vw;
|
||||
border-top-right-radius: 50vw;
|
||||
border-bottom-left-radius: 50vw;
|
||||
border-bottom-right-radius: 50vw;
|
||||
padding-bottom: Min(50vw, 250px);
|
||||
&-topper {
|
||||
margin-top: 175px;
|
||||
height: Min(50vw, 250px);
|
||||
text-align: center;
|
||||
.topper-img {
|
||||
position: relative;
|
||||
top: -170px;
|
||||
}
|
||||
.content-title {
|
||||
position: relative;
|
||||
top: -150px;
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
@media (max-width: 500px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-wrapper {
|
||||
margin-top: 30px;
|
||||
min-height: calc(100vh - 202px); // take up space above the footer
|
||||
margin-bottom: 30px;
|
||||
.content-title {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
@media (max-width: 768px) {
|
||||
font-size: 36px;
|
||||
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 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.content-text {
|
||||
br {
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
text-align: left;
|
||||
}
|
||||
// Expander per: https://www.digitalocean.com/community/tutorials/css-collapsible
|
||||
input[type='checkbox'] {
|
||||
display:none;
|
||||
}
|
||||
.lbl-toggle {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.lbl-toggle::before {
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid currentColor;
|
||||
vertical-align: middle;
|
||||
margin-right: .7rem;
|
||||
transform: translateY(-2px);
|
||||
transition: transform .5s ease-out;
|
||||
}
|
||||
.content-expander {
|
||||
border-bottom-color: $light-gray;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.toggle:checked + .lbl-toggle + .content-expanded {
|
||||
max-height: 100vh;
|
||||
overflow: visible;
|
||||
}
|
||||
.toggle:checked + .lbl-toggle::before {
|
||||
transform: rotate(90deg) translateX(-3px);
|
||||
}
|
||||
.content-expanded {
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
transition: max-height .5s ease-in-out;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
.content-img {
|
||||
margin: 55px 0 45px;
|
||||
@media (max-width: 768px) {
|
||||
margin: 40px 0;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 70%;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
left: -20vw;
|
||||
width: 150%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,7 +188,6 @@ a:active {
|
|||
// -------------------------
|
||||
.footer-area {
|
||||
font-family: $footer-font-family;
|
||||
background-color: $shade-gold;
|
||||
padding: 35px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
48
index.html
48
index.html
|
|
@ -6,25 +6,39 @@ 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 %}" />
|
||||
<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 title %}</h1>
|
||||
<p class="content-text text-black ls-40 mb-2">
|
||||
{% if site.data.deployment.show_chat %}
|
||||
{% t text.show_chat %}
|
||||
{% else %}
|
||||
{% t text.dont_show_chat %}
|
||||
{% endif %}
|
||||
</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>
|
||||
<div class="content-area-wrapper text-center">
|
||||
<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" href="#" data-micromodal-trigger="product-modal">{% t fdroid_button_text %}</a>
|
||||
<input id="apps-expander" class="toggle" type="checkbox">
|
||||
<label for="apps-expander" class="lbl-toggle content-expander">{% t apps_expander_text %}</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 text-center">
|
||||
<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 btn-modal" href="/chat">{% t chat_button_text %}</a>
|
||||
</div>
|
||||
<div class="right-bleed">
|
||||
<img src="{{site.baseurl}}{{ page_data.page_logo }}" alt="{% t page_logo_alt %}" />
|
||||
</div>
|
||||
</div>
|
||||
<a href="/chat/"><div class="content-expander">{% t chat_secondary_cta %}</div></a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue