mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-05-10 23:47:11 +00:00
website: fixes (#6454)
* add rtl support * enable arabic language * fix colors for navbar on RTL language and when scrolling to footer --------- Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>
This commit is contained in:
M. Sarmad Qadeer
@@ -14,6 +14,7 @@
|
||||
"textColor": "white",
|
||||
"iconBg": "green",
|
||||
"enabled": true,
|
||||
"home": true,
|
||||
"rtl": true
|
||||
},
|
||||
{
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
{% endfor %}
|
||||
|
||||
<header id="navbar">
|
||||
<a href="/{{ '' if lang == 'en' else lang }}" class="logo flex dark:hidden ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
|
||||
<a href="/{{ '' if lang == 'en' else lang }}" class="logo hidden dark:flex ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
|
||||
<a href="/{{ '' if lang == 'en' else lang }}" class="logo logo-light ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-light.png" alt="logo"></a>
|
||||
<a href="/{{ '' if lang == 'en' else lang }}" class="logo logo-dark ltr:mr-auto rtl:ml-auto"><img src="/img/new/logo-dark.png" alt="logo"></a>
|
||||
|
||||
<nav id="menu">
|
||||
<ul>
|
||||
|
||||
@@ -15,9 +15,17 @@ body.change-nav-color {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[dir="ltr"] .logo {
|
||||
border-bottom-right-radius: 12px;
|
||||
padding-right: 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[dir="rtl"] .logo {
|
||||
border-bottom-left-radius: 12px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.dark .logo {
|
||||
@@ -42,9 +50,17 @@ body.change-nav-color {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[dir="ltr"] .right-links {
|
||||
border-bottom-left-radius: 12px;
|
||||
padding-left: 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[dir="rtl"] .right-links {
|
||||
border-bottom-right-radius: 12px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.dark .right-links {
|
||||
@@ -69,14 +85,46 @@ header#navbar {
|
||||
|
||||
header#navbar>a.logo {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
padding-left: 30px;
|
||||
padding-top: 2px;
|
||||
height: 100%;
|
||||
/* display: flex; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
[dir="ltr"] header#navbar>a.logo {
|
||||
left: 0px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] header#navbar>a.logo {
|
||||
right: 0px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
header#navbar>a.logo.logo-light {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header#navbar>a.logo.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark header#navbar>a.logo.logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark header#navbar>a.logo.logo-dark {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[dir="rtl"].dark .change-nav-color header#navbar>a.logo.logo-light {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[dir="rtl"].dark .change-nav-color header#navbar>a.logo.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header#navbar>a.logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
@@ -183,7 +231,7 @@ header#navbar ul a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.change-nav-color .box-btn.token {
|
||||
.dark .change-nav-color .box-btn.token {
|
||||
background: linear-gradient(90deg, #019bfe 0%, #2e3fa0 100%);
|
||||
color: white;
|
||||
}
|
||||
@@ -219,9 +267,13 @@ header#navbar ul a span svg {
|
||||
fill: var(--nav-color);
|
||||
}
|
||||
|
||||
header#navbar nav#menu li.nav-link:hover span svg {
|
||||
[dir="ltr"] header#navbar nav#menu li.nav-link:hover span svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
[dir="rtl"] header#navbar nav#menu li.nav-link:hover span svg {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
header#navbar ul.sub-menu {
|
||||
@@ -348,6 +400,11 @@ header#navbar .nav-link:focus-within .sub-menu {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .flag-container .sub-menu {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
header#navbar button.theme-switch-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -380,14 +437,22 @@ header#navbar button.theme-switch-btn svg path {
|
||||
.right-links {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
padding-right: 20px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .right-links {
|
||||
right: 0px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .right-links {
|
||||
left: 0px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
button#cross-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@@ -454,9 +519,16 @@ button#cross-btn {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
[dir="ltr"] header#navbar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
[dir="rtl"] header#navbar {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.dark header#navbar {
|
||||
background: #0a0f2b;
|
||||
}
|
||||
@@ -494,13 +566,20 @@ button#cross-btn {
|
||||
header#navbar nav#menu {
|
||||
position: fixed !important;
|
||||
top: 54px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 54px);
|
||||
overflow: auto;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] header#navbar nav#menu {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] header#navbar nav#menu {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
header#navbar nav#menu .nav-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -433,7 +433,6 @@ section.cover div.content p {
|
||||
.publications-btns {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
@@ -441,6 +440,14 @@ section.cover div.content p {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
[dir="ltr"] .publications-btns {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .publications-btns {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.publications-btns img {
|
||||
width: 32px;
|
||||
}
|
||||
@@ -456,8 +463,6 @@ section.cover div.content p {
|
||||
.security-btns {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
transform: translateX(calc((100vw / 2) - 50%));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
@@ -465,6 +470,16 @@ section.cover div.content p {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
[dir="ltr"] .security-btns {
|
||||
left: 0;
|
||||
transform: translateX(calc((100vw / 2) - 50%));
|
||||
}
|
||||
|
||||
[dir="rtl"] .security-btns {
|
||||
right: 0;
|
||||
transform: translateX(calc(-1 * ((100vw / 2) - 50%)));
|
||||
}
|
||||
|
||||
.security-btns img {
|
||||
height: 36px;
|
||||
}
|
||||
@@ -473,27 +488,38 @@ section.cover div.content p {
|
||||
font-size: 14px !important;
|
||||
font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
|
||||
font-weight: 300 !important;
|
||||
text-align: left;
|
||||
color: white;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
[dir="ltr"] .security-audits {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .security-audits {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.publications-btns {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.security-btns {
|
||||
[dir="ltr"] .security-btns {
|
||||
transform: translateX(0);
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .security-btns {
|
||||
transform: translateX(0);
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.socials {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
right: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -501,6 +527,14 @@ section.cover div.content p {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[dir="ltr"] .socials {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .socials {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.socials a img {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
@@ -783,6 +817,12 @@ main .section-bg {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .page-2 .text-container,
|
||||
[dir="rtl"] .page-5 .text-container,
|
||||
[dir="rtl"] .page-6 .text-container {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.page-4 .text-container h2 {
|
||||
max-width: calc(var(--sec-vwu)*26) !important;
|
||||
}
|
||||
@@ -929,6 +969,10 @@ main .section-bg {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .roadmap>p:first-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.roadmap p.title span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@@ -166,17 +166,17 @@ active_home: true
|
||||
<h2>{{ "index-roadmap-h2" | i18n({}, lang) }}</h2>
|
||||
<div class="roadmap">
|
||||
<p>{{ "index-roadmap-2025" | i18n({}, lang) }} </p>
|
||||
<p class="title"><span>: </span>{{ "index-roadmap-2025-title" | i18n({}, lang) }}</p>
|
||||
<p class="title"><span class="ltr:order-first rtl:order-last">: </span>{{ "index-roadmap-2025-title" | i18n({}, lang) }}</p>
|
||||
<p>{{ "index-roadmap-2025-desc" | i18n({}, lang) }}</p>
|
||||
</div>
|
||||
<div class="roadmap">
|
||||
<p>{{ "index-roadmap-2026" | i18n({}, lang) }} </p>
|
||||
<p class="title"><span>: </span>{{ "index-roadmap-2026-title" | i18n({}, lang) }}</p>
|
||||
<p class="title"><span class="ltr:order-first rtl:order-last">: </span>{{ "index-roadmap-2026-title" | i18n({}, lang) }}</p>
|
||||
<p>{{ "index-roadmap-2026-desc" | i18n({}, lang) }}</p>
|
||||
</div>
|
||||
<div class="roadmap">
|
||||
<p>{{ "index-roadmap-2027" | i18n({}, lang) }} </p>
|
||||
<p class="title"><span>: </span>{{ "index-roadmap-2027-title" | i18n({}, lang) }}</p>
|
||||
<p class="title"><span class="ltr:order-first rtl:order-last">: </span>{{ "index-roadmap-2027-title" | i18n({}, lang) }}</p>
|
||||
<p>{{ "index-roadmap-2027-desc" | i18n({}, lang) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -235,19 +235,19 @@ active_home: true
|
||||
(function navColorOnScroll(){
|
||||
const header = document.querySelector('header#navbar');
|
||||
const cover = document.querySelector('.page-1.cover');
|
||||
if (!header || !cover || !('IntersectionObserver' in window)) {
|
||||
const footer = document.querySelector('.footer.page');
|
||||
if (!header || !cover || !footer || !('IntersectionObserver' in window)) {
|
||||
window.addEventListener('load', () => header && document.body.classList.toggle('change-nav-color', window.scrollY > 10));
|
||||
window.addEventListener('scroll', () => header && document.body.classList.toggle('change-nav-color', window.scrollY > 10));
|
||||
return;
|
||||
}
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
for (const e of entries) {
|
||||
// if cover is mostly visible, keep white nav; else switch to #001796
|
||||
const onCover = e.isIntersecting && e.intersectionRatio >= 0.02;
|
||||
document.body.classList.toggle('change-nav-color', !onCover);
|
||||
}
|
||||
// if cover or footer is mostly visible, keep white nav; else switch to #001796
|
||||
const onObserved = entries.some((e) => e.isIntersecting && e.intersectionRatio >= 0.02);
|
||||
document.body.classList.toggle('change-nav-color', !onObserved);
|
||||
}, { threshold: [0, 0.02, 1] });
|
||||
io.observe(cover);
|
||||
io.observe(footer);
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user