website: improve first page load (#6680)

* website: improve first page load

* remove low res images

* simplify

* fix buttons jitter

* fix color scheme toggling

* fix other pages

---------

Co-authored-by: Evgeny @ SimpleX Chat <259188159+evgeny-simplex@users.noreply.github.com>
This commit is contained in:
Evgeny
2026-03-16 19:23:00 +00:00
committed by GitHub
co-authored by Evgeny @ SimpleX Chat <259188159+evgeny-simplex@users.noreply.github.com>
parent 62fe23f008
commit f0799ef2a5
11 changed files with 82 additions and 17 deletions
+1
View File
@@ -0,0 +1 @@
<script>if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) document.documentElement.classList.add('dark')</script>
@@ -8,6 +8,7 @@
<head>
<meta charset="UTF-8" />
{% include "dark-mode.html" %}
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SimpleX blog: {{ title }}</title>
@@ -23,6 +24,7 @@
{% endif %}
<meta name="twitter:card" content="summary" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
<meta name="theme-color" content="#F3FAFF">
<link href="/css/tailwind.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/blog.css" />
<link id="prism-theme" rel="stylesheet" href="/css/prism-light.min.css"/>
+2
View File
@@ -9,12 +9,14 @@
<head>
<meta charset="UTF-8">
{% include "dark-mode.html" %}
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<meta name="Content-Type" content="text/html;charset=utf-8"/>
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico"/>
<meta name="theme-color" content="#ffffff">
<link href="/css/tailwind.css" rel="stylesheet"/>
<link id="prism-theme" rel="stylesheet" href="/css/prism-light.min.css"/>
<link href="/css/style.css" rel="stylesheet"/>
+2
View File
@@ -8,12 +8,14 @@
<head>
<meta charset="UTF-8">
{% include "dark-mode.html" %}
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<meta name="Content-Type" content="text/html;charset=utf-8" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
<meta name="theme-color" content="#F3FAFF">
<link href="/css/tailwind.css" rel="stylesheet" />
<link id="prism-theme" rel="stylesheet" href="/css/prism-light.min.css" />
<link href="/css/style.css" rel="stylesheet" />
+2
View File
@@ -7,6 +7,7 @@
{% endfor %}>
<head>
<meta charset="UTF-8">
{% include "dark-mode.html" %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
@@ -25,6 +26,7 @@
<meta property="og:image" content="{% cfg 'siteLocation' %}/img/share_simplex.jpg"/>
<meta name="twitter:card" content="summary"/>
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico"/>
<meta name="theme-color" content="#F3FAFF">
<link rel="stylesheet" href="/css/swiper-bundle.min.css">
<link rel="stylesheet" href="/css/blog.css">
@@ -8,6 +8,7 @@
<head>
<meta charset="UTF-8" />
{% include "dark-mode.html" %}
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SimpleX Privacy Policy</title>
@@ -23,6 +24,7 @@
{% endif %}
<meta name="twitter:card" content="summary" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
<meta name="theme-color" content="#F3FAFF">
<link href="/css/tailwind.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/blog.css" />
<link href="/css/style.css" rel="stylesheet" />
+2
View File
@@ -8,6 +8,7 @@
<head>
<meta charset="UTF-8" />
{% include "dark-mode.html" %}
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ title }}</title>
@@ -19,6 +20,7 @@
<meta property="og:image" content="{% cfg 'siteLocation' %}/img/share_simplex.jpg" />
<meta name="twitter:card" content="summary" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
<meta name="theme-color" content="#F3FAFF">
<link href="/css/tailwind.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/blog.css" />
<link id="prism-theme" rel="stylesheet" href="/css/prism-light.min.css"/>
+16
View File
@@ -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');