dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-03-31 07:35:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: improve first page load (#6680)

Browse Source 
* 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
parent 62fe23f008
commit f0799ef2a5
11 changed files with 82 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/src/_includes/dark-mode.html Normal file
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>

2
website/src/_includes/layouts/article.html
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>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
website/src/_includes/layouts/doc.html
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
website/src/_includes/layouts/jobs.html
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
website/src/_includes/layouts/main.html
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">

2
website/src/_includes/layouts/privacy.html
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>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
website/src/_includes/layouts/token.html
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
website/src/_includes/navbar.html
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');

4
website/src/css/design3-nav.css
View File

@@ -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%;
}

34
website/src/css/design3.css
View File

@@ -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;

32
website/src/index.html
View File

@@ -6,7 +6,7 @@ active_home: true
---
<!DOCTYPE html>
<html lang="{{ page.url | getlang }}"
<html class="bg-[#C1E3FE] dark:bg-[#050920]" lang="{{ page.url | getlang }}"
{% for language in languages.languages %}
{% if language.label == page.url | getlang %}
dir="{{ "rtl" if language.rtl else "ltr" }}"
@@ -15,9 +15,9 @@ active_home: true
<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, viewport-fit=cover">
<meta name="theme-color" content="transparent">
<title>{{ title }}</title>
<meta name="description" content="{{ description }}"/>
<meta name="Content-Type" content="text/html;charset=utf-8"/>
@@ -34,6 +34,34 @@ active_home: true
<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="#C1E3FE">
<link rel="preload" href="/img/design_3/cover.webp" as="image" type="image/webp">
<link rel="preload" href="/img/design_3/cover-light.webp" as="image" type="image/webp" media="(prefers-color-scheme: light)">
<link rel="preload" href="/img/new/logo-dark.png" as="image">
<link rel="preload" href="/img/new/logo-light.png" as="image" media="(prefers-color-scheme: light)">
<link rel="preload" href="/img/design_3/publications/trail-of-bits.png" as="image">
<link rel="preload" href="/img/design_3/publications/privacy-guides.png" as="image">
<link rel="preload" href="/img/design_3/publications/whonix.png" as="image">
<link rel="preload" href="/img/design_3/publications/heise.png" as="image">
<link rel="preload" href="/img/design_3/publications/kuketz-blog.png" as="image">
<link rel="preload" href="/img/design_3/publications/optout.png" as="image">
<link rel="preload" href="/fonts/GT-Walsheim/GT-Walsheim-LC-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/GT-Walsheim/GT-Walsheim-LC-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/Manrope/Manrope-ExtraLight.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/fonts/Manrope/Manrope-Light.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/fonts/Manrope/Manrope-Medium.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/fonts/Manrope/Manrope-Bold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/img/new/apple_store.svg" as="image">
<link rel="preload" href="/img/new/google_play.svg" as="image">
<link rel="preload" href="/img/new/f_droid.svg" as="image" media="(max-width: 959px)">
<link rel="preload" href="/img/design_3/testflight-dark.png" as="image" media="(max-width: 959px)">
<link rel="preload" href="/img/design_3/android-dark.png" as="image" media="(max-width: 959px)">
<link rel="preload" href="/img/design_3/socials/linux.png" as="image" media="(min-width: 960px)">
<link rel="preload" href="/img/design_3/socials/apple.png" as="image" media="(min-width: 960px)">
<link rel="preload" href="/img/design_3/socials/windows.png" as="image" media="(min-width: 960px)">
<link href="/css/tailwind.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/design3.css">