Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minimal design tweaks #382

Merged
merged 47 commits into from
Aug 8, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
87ec66f
Add dark mode classes
pedromvpg Jul 15, 2020
4b309dd
Add dark mode toggle interaction
pedromvpg Jul 15, 2020
d4b5460
Add dark mode toggle to nav
pedromvpg Jul 15, 2020
2d3b27a
Add coockie script and detection
pedromvpg Jul 21, 2020
dc9c213
Update screen images and add darkmode imgs
pedromvpg Jul 21, 2020
d08f579
Higher resolution screen images
pedromvpg Jul 22, 2020
b833715
Fix colors on mobile
pedromvpg Jul 22, 2020
b2a1d6c
Fix screen margin-top on mobile
pedromvpg Jul 22, 2020
883f7d4
Color adjustments on main CTAs
pedromvpg Jul 22, 2020
229a120
Add filters to images to invert on darkmode
pedromvpg Jul 22, 2020
affe67d
Darker grey background panels
pedromvpg Jul 22, 2020
f08cb43
Invert features svgs
pedromvpg Jul 22, 2020
675337f
Missing seperator
pedromvpg Jul 22, 2020
98d288d
Refine screen image
pedromvpg Jul 26, 2020
1e6d063
Remove language image paths
pedromvpg Jul 26, 2020
c4c6d99
Refine screen images
pedromvpg Jul 26, 2020
12d943a
Replace invert filter with contrast
pedromvpg Jul 26, 2020
0cd4e03
Reduce image size
pedromvpg Jul 26, 2020
dea97bd
Adjust colors on dark mode
pedromvpg Jul 26, 2020
5a19ba3
Correct quotes
pedromvpg Jul 26, 2020
7bda4cd
Set cookie
pedromvpg Jul 26, 2020
456d3b3
Add condition to switch to dark mode based on system settings
pedromvpg Jul 27, 2020
d26b2c0
Correct color of input markets currentcy selection
pedromvpg Jul 27, 2020
6044d53
Add FAQ toogle close open icons
pedromvpg Jul 27, 2020
1bfe17b
Scale image
pedromvpg Jul 27, 2020
c54df5a
Add icon to toggle
pedromvpg Jul 28, 2020
6721f3f
Correct logic for handeling cookie and os setting
pedromvpg Jul 28, 2020
e21d503
Change img switch on darkmode from content to bg-img for wider support
pedromvpg Jul 28, 2020
cdf9168
Smooth dark mode transition
pedromvpg Jul 28, 2020
687caf6
Add shadow to nav dropdowns
pedromvpg Jul 31, 2020
db6fc40
Reduce the amount of visual details and make design flatter
pedromvpg Jul 31, 2020
3b71336
Move link to outside of detected OS
pedromvpg Jul 31, 2020
1286a4a
Havier type on hero copy
pedromvpg Jul 31, 2020
b26a110
Add video module on the bottom of home
pedromvpg Jul 31, 2020
faf65aa
Merge branch 'master' into minimal-design-tweaks
pedromvpg Jul 31, 2020
285265f
Match letter spacing between light/dark modes
pedromvpg Jul 31, 2020
4348197
Add transparent border to prevent movement of type on hover
pedromvpg Jul 31, 2020
e0a6ff2
Remove arrow from languages
pedromvpg Aug 6, 2020
359ac75
Remove download dropdown and add all downloads link
pedromvpg Aug 6, 2020
90ecdbe
Add download arrow for all os
Aug 7, 2020
db3f047
Make getting-started link direct
Aug 7, 2020
5882b04
Merge branch 'master' into minimal-design-tweaks
Aug 7, 2020
23de7ed
Update arrow image filename
pedromvpg Aug 8, 2020
cf1eb3c
Merge branch 'minimal-design-tweaks' of https://github.com/pedromvpg/…
pedromvpg Aug 8, 2020
8688f91
Remove merge conflict issue
Aug 8, 2020
d018ce3
Change arrow back to 'right'
Aug 8, 2020
64bc1d7
Add space before mobile app logos
Aug 8, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _data/de.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ homepage_content:
downloads: Downloads
androidNotificationsApp: Benachrichtigungs-App Android
iosNotificationApp: Benachrichtigungs-App iOS
getStarted: Erste Schritte »
getStarted: Erste Schritte
runningWindows: Sie scheinen Windows zu benutzen
runningMac: Sie scheinen einen Mac zu benutzen
runnigDebian: Sie scheinen Debian/Ubuntu zu benutzen
Expand Down
2 changes: 1 addition & 1 deletion _data/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ homepage_content:
downloads: Downloads
androidNotificationsApp: Get Android Notifications App
iosNotificationApp: Get iOS Notification app
getStarted: Get Started »
getStarted: Get Started
runningWindows: You appear to be running Windows
runningMac: You appear to be using a Mac
runnigDebian: You appear to be using Debian/Ubuntu
Expand Down
2 changes: 1 addition & 1 deletion _data/es.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ homepage_content:
downloads: Descargas
androidNotificationsApp: App de Notificaciones Android
iosNotificationApp: App de Notificaciones iOS
getStarted: Comenzar »
getStarted: Comenzar
runningWindows: Parece que está ejecutando Windows
runningMac: Parece que está ejecutando Mac
runnigDebian: Parece que está usando Debian/Ubuntu
Expand Down
2 changes: 1 addition & 1 deletion _data/fr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ homepage_content:
downloads: Téléchargements
androidNotificationsApp: App de notifications Android
iosNotificationApp: App de notifications iOS
getStarted: Commencer »
getStarted: Commencer
runningWindows: Vous semblez utiliser Windows
runningMac: vous semblez utiliser un Mac
runnigDebian: vous semblez utiliser Debian/Ubuntu
Expand Down
2 changes: 1 addition & 1 deletion _data/ja.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ homepage_content:
downloads: ダウンロード
androidNotificationsApp: Android通知アプリを入手
iosNotificationApp: iOS通知アプリを入手
getStarted: 始める »
getStarted: 始める
runningWindows: Windowsを実行しているようです。
runningMac: Macを実行しているようです。
runnigDebian: Debian/Ubuntuを実行しているようです。
Expand Down
2 changes: 1 addition & 1 deletion _data/pt-PT.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ homepage_content:
downloads: Downloads
androidNotificationsApp: App de Notificação Android
iosNotificationApp: App de Notificação iOS
getStarted: Começar »
getStarted: Começar
runningWindows: Você parece estar a utilizar Windows
runningMac: Você parece estar a utilizar Mac
runnigDebian: Você parece estar a utilizar Debian/Ubuntu
Expand Down
2 changes: 1 addition & 1 deletion _data/ru.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ homepage_content:
downloads: Загрузить
androidNotificationsApp: Скачать приложение для Android
iosNotificationApp: Скачать приложение для iOS
getStarted: Узнать больше »
getStarted: Узнать больше
runningWindows: "Похоже, вы используете Windows"
runningMac: "Похоже, вы используете Mac"
runnigDebian: "Похоже, вы используете Debian/Ubuntu"
Expand Down
2 changes: 1 addition & 1 deletion _data/zh-CN.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ homepage_content:
downloads: 下载
androidNotificationsApp: 下载 Android 通知应用程序
iosNotificationApp: 下载 iOS 通知应用程序
getStarted: 现在开始 »
getStarted: 现在开始
runningWindows: 你似乎在使用 Windows
runningMac: 你似乎在使用 Mac
runnigDebian: 你似乎在使用 Debian/Ubuntu
Expand Down
4 changes: 2 additions & 2 deletions _includes/main_nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ page.lang_display }}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-menu shadow-lg" aria-labelledby="dropdownMenuButton">
{% assign pages = site.pages | where:"ref", page.ref | sort: 'lang_display' %}
{% for page in pages %}
<div class="dropdown-item btn-icon">
Expand Down Expand Up @@ -100,7 +100,7 @@
<a class="nav-link dropdown-toggle visible-language" href='#' id="languageSelectorDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ page.lang_display }}
</a>
<div class="dropdown-menu" aria-labelledby="languageSelectorDropdown">
<div class="dropdown-menu shadow-lg" aria-labelledby="languageSelectorDropdown">
{% assign pages = site.pages | where:"ref", page.ref | sort: 'lang_display' %}
{% for page in pages %}
<div class="dropdown-item btn-icon">
Expand Down
106 changes: 70 additions & 36 deletions _layouts/page_home.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<main class="bd-masthead" id="content" role="main">
<div class="row align-items-center">
<div class="col-md-12 order-md-1 text-md-left px-3 px-md-5">
<h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.title }}</h1>
<h1 class="intro display-1" style="margin-left: -.3rem;">{{ item.title }}</h1>

<div class="row-block pl-0 pt-4 pt-md-5 pr-0 pr-lg-5">

Expand All @@ -17,101 +17,98 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.

<div class="d-flex flex-column flex-md-row lead mb-1">

<div class="downloads-desktop btn-group os-selector-home col-sm-12 col-md-12 col-lg-5 px-0">
<div class="downloads-desktop btn-group os-selector-home col-sm-12 col-md-12 col-lg-5 px-0 hero-btn">

<!-- This what displays on the dropdown in collapsed state -->
<button class="btn btn-outline-secondary btn-lg selected-os-download btn-icon shadow-btn" type="button" data-bisq-version="{{ site.client_version }}" data-site-url="">
<div class="id-win64 hidden">
<a class="dl-win64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.exe">
<div class="float-left">
<img src="/images/icon-windows-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Windows" loading="lazy">
<img src="/images/icon-windows-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Windows" loading="lazy">
<a class="dl-win64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.exe">{{ item.buttonWindows }}</a>
{{ item.buttonWindows }}
</div>
<div class="float-right">
<a class="dl-win64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.exe">.exe</a>
.exe <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
</div>
</a>
</div>

<div class="id-mac hidden">
<a class="dl-mac" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-{{ site.client_version }}.dmg">
<div class="float-left">
<img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Mac" loading="lazy">
<img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Mac" loading="lazy">
<a class="dl-mac" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-{{ site.client_version }}.dmg">{{ item.buttonMac }}</a>
{{ item.buttonMac }}
</div>
<div class="float-right">
<a class="dl-mac" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-{{ site.client_version }}.dmg">.dmg</a>
.dmg <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
</div>
</a>
</div>

<div class="id-deb64 hidden">
<a class="dl-deb64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.deb">
<div class="float-left">
<img src="/images/icon-ubuntu-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Ubuntu/Debian" loading="lazy">
<img src="/images/icon-ubuntu-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Ubuntu/Debian" loading="lazy">
<a class="dl-deb64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.deb">{{ item.buttonDebian }}</a>
{{ item.buttonDebian }}
</div>
<div class="float-right">
<a class="dl-deb64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.deb">.deb</a>
.deb <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
</div>
</a>
</div>

<div class="id-rpm64 hidden">
<a class="dl-rpm64" href="https://github.com/bisq-network/bisq/releases/download/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.rpm">
<div class="float-left">
<img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Red Hat/Fedora" loading="lazy">
<img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Red Hat/Fedora" loading="lazy">
<a class="dl-rpm64" href="https://github.com/bisq-network/bisq/releases/download/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.rpm">{{ item.buttonRedHat }}</a>
{{ item.buttonRedHat }}
</div>
<div class="float-right">
<a class="dl-rpm64" href="https://github.com/bisq-network/bisq/releases/download/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.rpm">.rpm</a>
.rpm <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
</div>
</a>
</div>

<div class="id-all hidden">
<a href="{% lingual_link downloads %}">
<div class="float-left">
<img src="/images/icon-download-g.svg" class="os-icon os-icon-g" alt="Download Bisq" loading="lazy">
<img src="/images/icon-download-w.svg" class="os-icon os-icon-w" alt="Download Bisq" loading="lazy">
{{ item.buttonDownloads }}
</div>
<div class="float-right">
<a href="{% lingual_link downloads %}">{{ item.buttonGetBisq }}</a>
{{ item.buttonGetBisq }} <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
</div>
</a>
</div>
</button>

<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split hero-btn shadow-btn " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">{{ item.buttonToggle }}</span>
</button>

<div class="dropdown-menu dropdown-menu-right shadow-lg">
{% include os_selector_options.html %}
</div>
<!-- Need to repeat the function because the if/else function seems to nullify it -->
{% assign item = site.data[page.lang].homepage_content %}
</div>


<a href="{% lingual_link downloads %}" class="downloads-mobile btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn ">
<img src="/images/icon-download-g.svg" class="os-icon os-icon-g" alt="Download Bisq" loading="lazy">
<img src="/images/icon-download-w.svg" class="os-icon os-icon-w" alt="Download Bisq" loading="lazy">
{{ item.downloads }}
<img class="btn-icon-img" src="/images/icon-download-b.svg" alt="Download Bisq">
</a>


<a href="https://play.google.com/store/apps/details?id=com.joachimneumann.bisq" target="_blank" rel="noopener" class="downloads-android hidden btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn" onclick="ga('send', 'event', 'Jumbotron actions', 'download', 'android-notifications');">
<img src="/images/icon-android-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for Android" loading="lazy">
<img src="/images/icon-android-w.svg" class="os-icon os-icon-w" alt="Download Bisq Notification App for Android" loading="lazy">
{{ item.androidNotificationsApp }}
{{ item.androidNotificationsApp }} <img src="/images/icon-android-b.svg" class="btn-icon-img" alt="Download Bisq Notification App for Android" loading="lazy">
</a>


<a href="https://itunes.apple.com/us/app/bisq-mobile/id1424420411" target="_blank" rel="noopener" class="downloads-ios hidden btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn" onclick="ga('send', 'event', 'Jumbotron actions', 'download', 'ios-notifications');">
<img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for iOS" loading="lazy">
<img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq Notification App for iOS" loading="lazy">
{{ item.iosNotificationApp }}
{{ item.iosNotificationApp }} <img src="/images/icon-apple-b.svg" class="btn-icon-img" alt="Download Bisq Notification App for iOS" loading="lazy">
</a>


<a href="https://docs.bisq.network/getting-started.html" target="_blank" rel="noopener" class="btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn">
{{ item.getStarted }}
<a href="/getting-started" class="btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn">
{{ item.getStarted }} <img class="btn-icon-img" src="/images/arrow-right-w.svg" />
</a>


Expand All @@ -132,12 +129,18 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
</div>


<p class="text-muted mb-0 mt-1 small" style="opacity: 0.5">
v{{ site.client_version }} — <span class="id-win64 hidden">{{ item.runningWindows }}</span>
<span class="id-mac hidden">{{ item.runningMac }}</span>
<span class="id-deb64 hidden">{{ item.runnigDebian }}</span>
<span class="id-rpm64 hidden">{{ item.runningRedHat }}</span>
<span class="id-all hidden">{{ item.currentVersion }}</span> <!-- fallback text if no desktop os recognized -->
<p class="mb-0 mt-1 small" style="opacity: 0.7">
<a href="{% lingual_link downloads %}">
{{ site.data[page.lang].os_selector_options.liAllDownloads }}
</a>
<span class="seperator-version"> | </span>
v{{ site.client_version }}
<span class="seperator-version"> | </span>
<span class="id-win64 hidden">{{ item.runningWindows }}</span>
<span class="id-mac hidden">{{ item.runningMac }}</span>
<span class="id-deb64 hidden">{{ item.runnigDebian }}</span>
<span class="id-rpm64 hidden">{{ item.runningRedHat }}</span>
<span class="id-all hidden">{{ item.currentVersion }}</span> <!-- fallback text if no desktop os recognized -->
</p>


Expand Down Expand Up @@ -282,7 +285,38 @@ <h2 id="join-the-community">{{ item.hJoin }}</h2>
</div>
</div>


<div class="grey-back video">
<div class="row-block container" style="padding-bottom: 4em;">
<div class="row video-container">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/og7tqVK8c1E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<style>
.grey-back.video {
margin: 0 0;
padding-bottom: 0;
background: #272727;
}
.dark-mode .grey-back.video {
background: #0f0f0f;
}
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
margin: 0;
}

iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</div>
</div>

{% comment %}
<!-- future stats section -->
Expand Down
Loading