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.

Sign up for GitHub

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

Dark mode #378

Merged
merged 32 commits into from
Jul 31, 2020
Merged

Dark mode #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 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
b8e5a47
Update _layouts/default.html
pedromvpg Jul 30, 2020
f89f9c6
Update _layouts/default.html
pedromvpg Jul 30, 2020
dc03800
Update _layouts/default.html
pedromvpg Jul 30, 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
5 changes: 5 additions & 0 deletions _includes/main_nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,11 @@
</li>
{% endif %}


<li class="nav-item">
<div class="mode-toggle nav-link"><img alt="mode toggle" src="/images/mode-toggle.svg" /></div>
</li>

</ul>
</div>
</nav>
15 changes: 15 additions & 0 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@

<title>{{ page.title }}</title>

<script src="/js/js.cookie.min.js"></script>
<script defer src="/js/jquery-3.3.1.min.js"></script>
<script defer src="/js/popper.min.js"></script>
<script defer src="/js/bootstrap.min.js"></script>
Expand Down Expand Up @@ -120,6 +121,20 @@
</head>

<body class="home page-template-default page page-id-6 custom-background">
<script>
if (Cookies.get('darkmode') === undefined && window.matchMedia('(prefers-color-scheme: light)').matches) {
Cookies.set("darkmode", 0);
}else if(Cookies.get('darkmode') === undefined && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add("dark-mode");
Cookies.set("darkmode", 1);
}else if (Cookies.get('darkmode') == 1) {
Cookies.set("darkmode", 1);
document.body.classList.add("dark-mode");
}else{
Cookies.set("darkmode", 0);
document.body.classList.remove("dark-mode");
}
</script>

{% include main_nav.html %}

Expand Down
15 changes: 7 additions & 8 deletions _layouts/page_home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,20 +114,19 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
{{ item.getStarted }}
</a>

{% comment %}


{% comment %}
<a id="play-video" href="/" class="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-play-g.svg" class="os-icon os-icon-g" alt="Play Bisq video" loading="lazy">
<img src="/images/icon-play-w.svg" class="os-icon os-icon-w" alt="Play Bisq video" loading="lazy">
Play Video
</a>

<div id="video-overlay" style="display:none">
<div class="embed-responsive">
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

{% endcomment %}

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

</div>
<div class="col-md-12 order-md-1 text-md-left homepage-hero">
<img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" style="width: 100%; display: block;" src="{% lingual_link image %}images/bisq_screen0.png" loading="lazy">
<img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" style="width: 100%; display: block;" src="/images/screens/bisq_hero_light.png" loading="lazy">
</div>
</div>

Expand Down Expand Up @@ -244,10 +243,10 @@ <h2>{{ item.hGetStarted }}</h2>
</ol>
</div>
<div class="col-12 col-md-7 offset-0 offset-md-1">
<div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="{% lingual_link image %}images/bisq_screen0.png" loading="lazy"></div>
<div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="{% lingual_link image %}images/bisq_screen1.png" loading="lazy"></div>
<div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="{% lingual_link image %}images/bisq_screen0.png" loading="lazy"></div>
<div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="{% lingual_link image %}images/bisq_screen1.png" loading="lazy"></div>
<div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/screens/step1_light.png" loading="lazy"></div>
<div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/images/screens/step2_light.png" loading="lazy"></div>
<div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/screens/step3_light.png" loading="lazy"></div>
<div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/images/screens/step4_light.png" loading="lazy"></div>

</div>
</div>
Expand Down
Loading