From aa5d422048bbb917054923d1928bed59d7c8e698 Mon Sep 17 00:00:00 2001 From: GBKS Date: Mon, 10 Aug 2020 17:02:35 +0200 Subject: [PATCH] Minor tweaks to finalize the V1 landing page Updated headline based on issue and surrounding discussion. Reduced font sizes on tiny phones like iPhone SE. Added "bitcoin design" ascii art to page source. --- _layouts/home.html | 11 +++++++++- _sass/minima/_home-minimal-page.scss | 30 ++++++++++++++++++++++++---- _sass/minima/_mixins.scss | 6 ++++++ _sass/minima/initialize.scss | 5 +++-- 4 files changed, 45 insertions(+), 7 deletions(-) diff --git a/_layouts/home.html b/_layouts/home.html index c61330944..0bbb2f2e2 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -1,4 +1,13 @@ + + {%- include head.html -%} @@ -13,7 +22,7 @@

Bitcoin Design

-

We are an open community with the goal of helping improve the design of bitcoin and its ecosystem.

+

An open community collaborating on making Bitcoin more user-friendly through thoughtful user experience design.

Join us on Slack, or see what we are working on on Github. This is a temporary landing page. Stay tuned for updates.

diff --git a/_sass/minima/_home-minimal-page.scss b/_sass/minima/_home-minimal-page.scss index 9a7e6d67c..f8ad8baf9 100644 --- a/_sass/minima/_home-minimal-page.scss +++ b/_sass/minima/_home-minimal-page.scss @@ -106,6 +106,7 @@ } } + // Medium to large phones and tablets. @include media-query(medium-down) { height: 100vh; flex-direction: column; @@ -158,6 +159,31 @@ } } + // For iPhone SE. + @include media-query(tiny) { + section { + &:first-child { + h1 { + font-size: 32px; + + &:before { + width: 60px; + height: 60px; + } + } + } + + &:last-child { + .copy { + p { + font-size: 18px; + } + } + } + } + } + + // Laptops and desktops. @include media-query(large) { flex-direction: column; justify-content: center; @@ -185,8 +211,4 @@ } } } - - @include media-query(small) { - - } } \ No newline at end of file diff --git a/_sass/minima/_mixins.scss b/_sass/minima/_mixins.scss index cb974e7fd..eb0a86961 100644 --- a/_sass/minima/_mixins.scss +++ b/_sass/minima/_mixins.scss @@ -10,6 +10,12 @@ // Media queries @mixin media-query($media-query) { + @if $media-query == tiny { + @media only screen and (max-width:($tiny_width - 1)) { + @content; + } + } + @if $media-query == small { @media only screen and (max-width:($small_width - 1)) { @content; diff --git a/_sass/minima/initialize.scss b/_sass/minima/initialize.scss index de5991f34..d83d32143 100644 --- a/_sass/minima/initialize.scss +++ b/_sass/minima/initialize.scss @@ -20,8 +20,9 @@ $table-text-align: left !default; $content-width: 1340px !default; // For media queries. -$small_width: 640px; -$large_width: 1024px; +$tiny_width: 375px; +$small_width: 640px; +$large_width: 1024px; $huge_width: 1440px;