diff --git a/website/src/_includes/dark-mode.html b/website/src/_includes/dark-mode.html
new file mode 100644
index 0000000000..744eaa2b5e
--- /dev/null
+++ b/website/src/_includes/dark-mode.html
@@ -0,0 +1 @@
+
diff --git a/website/src/_includes/layouts/article.html b/website/src/_includes/layouts/article.html
index 72d9b10b78..a54cad9a77 100644
--- a/website/src/_includes/layouts/article.html
+++ b/website/src/_includes/layouts/article.html
@@ -8,6 +8,7 @@
+ {% include "dark-mode.html" %}
SimpleX blog: {{ title }}
@@ -23,6 +24,7 @@
{% endif %}
+
diff --git a/website/src/_includes/layouts/doc.html b/website/src/_includes/layouts/doc.html
index 017526d164..e148867f17 100644
--- a/website/src/_includes/layouts/doc.html
+++ b/website/src/_includes/layouts/doc.html
@@ -9,12 +9,14 @@
+ {% include "dark-mode.html" %}
{{ title }}
+
diff --git a/website/src/_includes/layouts/jobs.html b/website/src/_includes/layouts/jobs.html
index 74ec29a23e..5aa3ff286b 100644
--- a/website/src/_includes/layouts/jobs.html
+++ b/website/src/_includes/layouts/jobs.html
@@ -8,12 +8,14 @@
+ {% include "dark-mode.html" %}
{{ title }}
+
diff --git a/website/src/_includes/layouts/main.html b/website/src/_includes/layouts/main.html
index 26a0d034bc..d51c934446 100644
--- a/website/src/_includes/layouts/main.html
+++ b/website/src/_includes/layouts/main.html
@@ -7,6 +7,7 @@
{% endfor %}>
+ {% include "dark-mode.html" %}
{{ title }}
@@ -25,6 +26,7 @@
+
diff --git a/website/src/_includes/layouts/privacy.html b/website/src/_includes/layouts/privacy.html
index 7b41c6e5bc..d226459dc1 100644
--- a/website/src/_includes/layouts/privacy.html
+++ b/website/src/_includes/layouts/privacy.html
@@ -8,6 +8,7 @@
+ {% include "dark-mode.html" %}
SimpleX Privacy Policy
@@ -23,6 +24,7 @@
{% endif %}
+
diff --git a/website/src/_includes/layouts/token.html b/website/src/_includes/layouts/token.html
index 62e8e386b3..fa884271e0 100644
--- a/website/src/_includes/layouts/token.html
+++ b/website/src/_includes/layouts/token.html
@@ -8,6 +8,7 @@
+ {% include "dark-mode.html" %}
{{ title }}
@@ -19,6 +20,7 @@
+
diff --git a/website/src/_includes/navbar.html b/website/src/_includes/navbar.html
index 16782d3771..9bfe8a3913 100644
--- a/website/src/_includes/navbar.html
+++ b/website/src/_includes/navbar.html
@@ -218,6 +218,20 @@ function iconToggle () {
moonIcon.classList.toggle('hidden');
}
+function updateThemeColor() {
+ const meta = document.querySelector('meta[name="theme-color"]');
+ if (meta) meta.setAttribute('content', getComputedStyle(document.body).backgroundColor);
+ const navbar = document.querySelector('header#navbar');
+ if (navbar && navbar.classList.contains('open')) {
+ navbar.style.transition = 'none';
+ navbar.classList.remove('open');
+ setTimeout(() => {
+ navbar.classList.add('open');
+ setTimeout(() => navbar.style.transition = '', 0);
+ }, 0);
+ }
+}
+
function themeCheck() {
if (userTheme === 'dark' || (!userTheme && systemTheme)) {
document.documentElement.classList.add('dark');
@@ -232,6 +246,7 @@ function themeCheck() {
prismThemeLink.setAttribute('href','/css/prism-light.min.css')
}
}
+ updateThemeColor();
}
themeCheck();
@@ -251,6 +266,7 @@ function themeSwitch () {
}
iconToggle();
}
+ updateThemeColor();
}
const nav = document.querySelector('header#navbar');
diff --git a/website/src/css/design3-nav.css b/website/src/css/design3-nav.css
index e6558823fc..6fd3826566 100644
--- a/website/src/css/design3-nav.css
+++ b/website/src/css/design3-nav.css
@@ -585,7 +585,7 @@ button#cross-btn {
}
header#navbar nav#menu .nav-link a {
- font-family: "Manrope", "GT-Walsheim", sans-serif;
+ font-family: "Manrope", sans-serif;
font-weight: 300;
font-size: 18px;
width: 100%;
@@ -638,7 +638,7 @@ button#cross-btn {
}
header#navbar nav#menu .sub-menu li a {
- font-family: "Manrope", "GT-Walsheim", sans-serif;
+ font-family: "Manrope", sans-serif;
font-weight: 300;
width: 100%;
}
diff --git a/website/src/css/design3.css b/website/src/css/design3.css
index d4b5d4d271..d2d9b65aac 100644
--- a/website/src/css/design3.css
+++ b/website/src/css/design3.css
@@ -216,10 +216,6 @@ html {
font-family: GT-Walsheim, Gilroy, Helvetica, sans-serif;
}
-html,
-body {
- background: #ffffff;
-}
.dark html,
.dark body {
@@ -397,8 +393,8 @@ section.cover div.content {
}
section.cover div.content h1 {
- font-family: "GT-Walsheim", "Manrope", sans-serif;
- font-weight: 600;
+ font-family: "GT-Walsheim", sans-serif;
+ font-weight: 700;
font-size: calc(var(--sec-vwu) * 11.7);
line-height: 0.9;
letter-spacing: -0.025em;
@@ -419,7 +415,7 @@ section.cover div.content h1 .medium {
}
section.cover div.content h2 {
- font-family: "GT-Walsheim", "Manrope", sans-serif;
+ font-family: "GT-Walsheim", sans-serif;
font-weight: 400;
font-size: calc(var(--sec-vwu) * 5);
letter-spacing: -0.025em;
@@ -427,7 +423,7 @@ section.cover div.content h2 {
}
section.cover div.content p {
- font-family: "Manrope", "GT-Walsheim", sans-serif;
+ font-family: "Manrope", sans-serif;
font-weight: 200;
font-size: calc(var(--sec-vwu) * 2.14);
align-items: center;
@@ -491,7 +487,7 @@ section.cover div.content p {
.security-audits {
font-size: 14px !important;
- font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
+ font-family: 'Manrope', sans-serif !important;
font-weight: 300 !important;
color: white;
line-height: 1.2;
@@ -532,6 +528,14 @@ section.cover div.content p {
flex-wrap: wrap;
}
+@media (min-width: 960px) {
+ .socials .desktop-app-btn,
+ .socials .apple-store-btn,
+ .socials .google-play-btn {
+ display: flex !important;
+ }
+}
+
[dir="ltr"] .socials {
right: 30px;
}
@@ -567,7 +571,7 @@ section.cover div.content p {
.desktop-app-btn .btn-content p {
margin: 0;
font-size: 11px !important;
- font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
+ font-family: 'Manrope', sans-serif !important;
font-weight: 300 !important;
line-height: 1.2 !important;
text-align: left;
@@ -593,6 +597,10 @@ section.cover div.content p {
.socials {
position: static;
}
+
+ .socials {
+ min-height: 42px;
+ }
}
/* --- MAIN SECTIONS --- */
@@ -761,7 +769,7 @@ main .section-bg {
}
.page .text-container h2 {
- font-family: "GT-Walsheim", "Manrope", sans-serif;
+ font-family: "GT-Walsheim", sans-serif;
font-weight: 300;
font-size: calc(var(--sec-vwu)*4.94);
letter-spacing: -0.025em;
@@ -775,7 +783,7 @@ main .section-bg {
}
.page .text-container p {
- font-family: "Manrope", "GT-Walsheim", sans-serif;
+ font-family: "Manrope", sans-serif;
font-weight: 200;
font-size: calc(var(--sec-vwu)*1.62);
max-width: calc(var(--sec-vwu)*23);
@@ -791,7 +799,7 @@ main .section-bg {
}
.page .text-container a {
- font-family: "Manrope", "GT-Walsheim", sans-serif;
+ font-family: "Manrope", sans-serif;
font-weight: 200;
font-size: calc(var(--sec-vwu)*1.62);
text-decoration: underline;
diff --git a/website/src/index.html b/website/src/index.html
index 347874a6f7..7e0e5d524b 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -6,7 +6,7 @@ active_home: true
---
-
+ {% include "dark-mode.html" %}
-
{{ title }}
@@ -34,6 +34,34 @@ active_home: true
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+