website: layout fixes, token button (#6415)

This commit is contained in:
Evgeny
2025-10-28 13:36:14 +00:00
committed by GitHub
parent c65090c8c4
commit b5d755b946
8 changed files with 142 additions and 225 deletions
+1
View File
@@ -5,6 +5,7 @@
"reference": "Reference",
"blog": "Blog",
"features": "Features",
"navbar-token": "Token",
"why-simplex": "Why SimpleX",
"simplex-privacy": "SimpleX privacy",
"simplex-network": "SimpleX network",
+5 -10
View File
@@ -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 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>
<nav id="menu">
<ul>
@@ -111,6 +111,9 @@
</nav>
<div class="right-links">
<a class="box-btn token md:hidden" href="/token">
{{ 'navbar-token' | i18n({}, lang) }}
</a>
<button href="#" class="theme-switch-btn">
<svg class="sun" width="469" height="469" viewBox="0 0 469 469" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M225.768 1.44594C220.301 3.84594 214.701 10.6459 213.768 15.9793C213.234 18.3793 213.101 31.7126 213.368 45.7126L213.768 71.1793L217.634 76.1126C226.701 88.1126 242.968 87.5793 252.301 75.0459C254.968 71.5793 255.101 69.5793 255.101 42.2459C255.101 14.9126 254.968 12.9126 252.301 9.44594C250.834 7.44594 248.034 4.51261 246.168 3.17928C241.768 -0.154057 231.101 -1.08739 225.768 1.44594Z"/>
@@ -150,14 +153,10 @@
<li>
{% if language.flag %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
<img src="{{ language.flag }}" alt="" srcset="">
<p>{{ language.name }}</p>
</a>
{% else %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
<div style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
<p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
</div>
<p>{{ language.name }}</p>
</a>
{% endif %}
@@ -171,14 +170,10 @@
<li>
{% if language.flag %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
<img src="{{ language.flag }}" alt="" srcset="">
<p>{{ language.name }}</p>
</a>
{% else %}
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
<div style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
<p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
</div>
<p>{{ language.name }}</p>
</a>
{% endif %}
+79 -12
View File
@@ -10,7 +10,7 @@ body.change-nav-color {
--nav-color: #001796;
}
@media screen and (min-width: 950px) {
@media screen and (min-width: 960px) {
.logo {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
@@ -70,14 +70,15 @@ header#navbar {
header#navbar>a.logo {
position: absolute;
left: 0px;
padding-left: 16px;
padding-left: 30px;
padding-top: 2px;
height: 100%;
/* display: flex; */
align-items: center;
}
header#navbar>a.logo img {
height: 32px;
height: 40px;
width: auto;
}
@@ -102,12 +103,24 @@ header#navbar ul {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 49px;
gap: 60px;
list-style: none;
}
@media screen and (max-width: 1279px) {
header#navbar ul {
gap: 48px;
}
}
@media screen and (max-width: 1024px) {
header#navbar ul {
gap: 40px;
}
}
header#navbar ul a {
font-family: "Manrope", "GT-Walsheim", sans-serif;
font-family: "Manrope", sans-serif;
color: white;
text-decoration: none;
font-size: 16px;
@@ -121,6 +134,59 @@ header#navbar ul a {
white-space: nowrap;
}
@media screen and (min-width: 960px) {
header#navbar ul .nav-link a,
header#navbar ul .nav-link-text {
font-size: 18px;
}
header#navbar ul .nav-link .sub-menu a {
font-size: 16px;
}
}
.box-btn {
height: 36px;
padding: 0 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.25px !important;
border-radius: 6px !important;
}
.box-btn.btn-1 {
background-color: #639bd9;
}
.dark .box-btn.btn-1 {
background-color: #44547D;
}
.box-btn.token {
font-size: 18px !important;
font-weight: 500 !important;
background: linear-gradient(90deg, #019bfe 0%, #2e3fa0 100%);
color: white;
}
.box-btn.gold-gradient,
.dark .box-btn.token {
background: linear-gradient(90deg,
#ffb55d 0%,
#fff494 50%,
#fbffdd 100%);
color: black;
}
.change-nav-color .box-btn.token {
background: linear-gradient(90deg, #019bfe 0%, #2e3fa0 100%);
color: white;
}
header#navbar ul a span {
display: flex;
height: 100%;
@@ -143,7 +209,7 @@ header#navbar ul a span svg {
fill: #fff;
}
@media screen and (min-width: 950px) {
@media screen and (min-width: 960px) {
header#navbar nav#menu>ul>li>a {
color: var(--nav-color);
}
@@ -245,7 +311,7 @@ header#navbar .nav-link:focus-within .sub-menu {
fill: white;
}
@media screen and (min-width: 950px) {
@media screen and (min-width: 960px) {
.flag-container>a {
color: var(--nav-color) !important;
}
@@ -256,7 +322,8 @@ header#navbar .nav-link:focus-within .sub-menu {
}
.flag-container>a p {
font-size: 17px;
font-size: 14px;
font-family: "Manrope", sans-serif;
font-weight: 500;
user-select: none;
-webkit-user-select: none;
@@ -287,7 +354,7 @@ header#navbar button.theme-switch-btn {
}
header#navbar button.theme-switch-btn svg {
width: 18px;
width: 20px;
height: auto;
}
@@ -300,7 +367,7 @@ header#navbar button.theme-switch-btn svg path {
fill: white;
}
@media screen and (min-width: 950px) {
@media screen and (min-width: 960px) {
header#navbar button.theme-switch-btn svg path {
fill: var(--nav-color) !important;
transition: all 0.3s ease;
@@ -311,7 +378,7 @@ header#navbar button.theme-switch-btn svg path {
position: absolute;
top: 0;
right: 0px;
padding-right: 16px;
padding-right: 20px;
height: 54px;
display: flex;
align-items: center;
@@ -362,7 +429,7 @@ button#cross-btn {
height: auto;
}
@media (max-width: 949px) {
@media (max-width: 959px) {
#mobile-header {
position: fixed;
top: 0;
+41 -57
View File
@@ -171,7 +171,7 @@
#fff6e0 90%);
}
@media screen and (max-width: 949px) {
@media screen and (max-width: 959px) {
:root {
--bg-grad: linear-gradient(30deg,
#e8f3ff 0%,
@@ -226,7 +226,7 @@ body {
background: #0a0f2b;
}
@media screen and (min-width: 950px) {
@media screen and (min-width: 960px) {
html {
overscroll-behavior: none;
}
@@ -429,7 +429,7 @@ section.cover div.content p {
.publications-btns {
position: absolute;
bottom: 24px;
left: 16px;
left: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -438,7 +438,15 @@ section.cover div.content p {
}
.publications-btns img {
height: 36px;
width: 32px;
}
.publications-btns img.kuketz {
width: 38px;
}
.publications-btns img.whonix {
width: 30px;
}
.security-btns {
@@ -457,30 +465,6 @@ section.cover div.content p {
height: 36px;
}
.box-btn {
height: 36px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px !important;
font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.25px !important;
border-radius: 6px !important;
}
.box-btn.btn-1 {
background-color: #639bd9;
}
.box-btn.btn-2 {
background: linear-gradient(100deg,
#ffb55d 0%,
#fff494 50%,
#fbffdd 100%);
}
.security-audits {
font-size: 14px !important;
font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
@@ -490,7 +474,7 @@ section.cover div.content p {
line-height: 1.2;
}
@media screen and (max-width: 1280px) {
@media screen and (max-width: 1279px) {
.publications-btns {
display: none;
visibility: hidden;
@@ -505,7 +489,7 @@ section.cover div.content p {
.socials {
position: absolute;
bottom: 22px;
right: 16px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
@@ -529,27 +513,26 @@ section.cover div.content p {
background-color: #000;
border: #4f4f4f 1px solid;
border-radius: 6px;
padding: 6px;
padding: 6px 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
gap: 10px;
}
.desktop-app-btn .btn-content p {
margin: 0;
font-size: 10px !important;
font-size: 11px !important;
font-family: 'Manrope', 'GT-Walsheim', sans-serif !important;
font-weight: 300 !important;
line-height: 1.2 !important;
text-align: left;
color: #fff;
width: 60px;
}
.desktop-app-btn .btn-content img {
height: 22px !important;
height: 24px !important;
width: auto;
}
@@ -557,10 +540,10 @@ section.cover div.content p {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
gap: 6px;
}
@media screen and (max-width: 949px) {
@media screen and (max-width: 959px) {
.publications-btns,
.security-btns,
@@ -641,7 +624,7 @@ main .section-bg {
background-image: url("/img/design_3/section-5-desktop.webp");
}
@media screen and (max-width: 949px) {
@media screen and (max-width: 959px) {
.page-2 {
background-image: url("/img/design_3/section-2-mobile-light.webp");
background-size: auto calc(var(--cover-bg-h) * 0.84);
@@ -853,7 +836,7 @@ main .section-bg {
display: none;
}
@media (max-width: 949px) {
@media (max-width: 959px) {
section.cover div.content {
gap: calc(var(--sec-vhu) * 2.5);
transform: translateY(calc(var(--sec-vhu) * 5));
@@ -983,7 +966,7 @@ main .section-bg {
border-radius: calc(var(--sec-vhu) * 1.8);
}
@media screen and (max-width: 949px) {
@media screen and (max-width: 959px) {
.page-6 .group-images {
width: 100%;
height: 10%;
@@ -1006,14 +989,6 @@ main .section-bg {
<img class="pos" style="--c:3; --r:2; --w:2; --h:2" src="..." />
places the image starting at column 3, row 2, spanning 2 columns × 2 rows.
*/
.page-6 .group-images>a.simplex-image {
--c: 4;
--r: 3;
--w: 2;
--h: 2;
margin: 1.15rem;
}
.page-6 .group-images>a.group-image:nth-child(1) {
--c: 2;
--r: 1;
@@ -1196,14 +1171,15 @@ main .section-bg {
--h: 1
}
@media screen and (max-width: 949px) {
.page-6 .group-images>a.simplex-image {
--c: 4;
--r: 4;
--w: 2;
--h: 2
}
.page-6 .group-images>a.simplex-image {
--c: 4;
--r: 3;
--w: 2;
--h: 2;
margin: calc(var(--sec-vhu) * 2);
}
@media screen and (max-width: 959px) {
.page-6 .group-images>a.group-image:nth-child(1) {
--c: 3;
--r: 1;
@@ -1385,6 +1361,14 @@ main .section-bg {
--w: 1;
--h: 1
}
.page-6 .group-images>a.simplex-image {
--c: 4;
--r: 4;
--w: 2;
--h: 2;
margin: calc(var(--sec-vhu) * 1);
}
}
.page-6 .group-images a {
@@ -1399,7 +1383,7 @@ section.page.footer {
min-height: fit-content;
}
@media screen and (max-width: 950px) {
@media screen and (max-width: 959px) {
section.page.footer {
height: 100lvh;
min-height: 100lvh;
@@ -1434,7 +1418,7 @@ section.page.footer {
}
}
@media (min-width: 950px) {
@media (min-width: 960px) {
.footer .container-md,
.footer .container-sm,
-137
View File
@@ -313,143 +313,6 @@ a{
pointer-events: none;
}
/* .menu-link{
font-size: 16px;
line-height: 33.42px;
color: #0D0E12;
}
.dark .menu-link{
color: #fff;
}
.nav-link ul li a.active{
color: #0053D0;
}
.dark .nav-link ul li a.active{
color: #66D9E2;
}
@media (min-width:1024px) {
.nav-link-text,
.menu-link {
display: inline-block;
position: relative;
color: #0D0E12;
}
.nav-link-text::before,
.active .nav-link-text::before,
.menu-link::before {
content: "";
position: absolute;
width: 0;
height: 1px;
bottom: 0;
right: 0;
transition: width 0.25s ease-out;
}
.menu-link::before {
background-color: #0D0E12;
}
.dark .menu-link::before {
background-color: #fff;
}
.active .nav-link-text::before {
width: 100%;
}
.nav-link:hover .nav-link-text::before,
.menu-link:hover::before {
width: 100%;
left: 0;
right: auto;
}
}
.sub-menu {
visibility: hidden;
opacity: 0;
color: #505158;
}
.sub-menu .no-hover{
color: #505158 !important;
}
.dark .sub-menu,
.dark .sub-menu .no-hover {
color: #fff !important;
}
.dark .sub-menu li:hover {
color: #66D9E2;
}
.sub-menu li:hover {
color: #0053D0;
}
.sub-menu {
transition: all .3s ease !important;
}
.nav-link span svg,
header nav {
transition: all 0.5s ease;
}
.nav-link:hover span svg {
transform: rotate(180deg);
}
@media (min-width:1024px) {
.nav-link:hover .sub-menu,
.nav-link:focus-within .sub-menu {
visibility: visible;
opacity: 1;
margin-top: 0;
}
}
@media (max-width: 1024px) {
.sub-menu {
max-height: 0;
transform: translateY(-10px);
transition: all .7s ease !important;
overflow: hidden;
}
.active .sub-menu {
max-height: 1000px;
transform: translateY(0px);
opacity: 1;
visibility: visible;
margin-top: 0;
}
header nav {
visibility: hidden;
opacity: 0;
transform: translateX(100%);
overflow-y: auto;
}
header nav.open {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
.flag-container .sub-menu{
max-height: fit-content;
}
} */
.lock-scroll {
overflow: hidden;
}
+3 -2
View File
@@ -9,7 +9,6 @@ active_directory: true
{% set lang = page.url | getlang %}
{% block js_scripts %}
<script src="/js/flag-anchor.js"></script>
<script async defer src="/js/directory.js"></script>
{% endblock %}
<style>
@@ -271,4 +270,6 @@ active_directory: true
<div id="directory" style="height: 3000px;"></div>
<div id="bottom-pagination" class="pagination"></div>
</div>
</section>
</section>
<script src="/js/directory.js"></script>
+5 -5
View File
@@ -81,7 +81,7 @@ active_home: true
<img class="no-border" src="/img/design_3/socials/apple.png" alt="">
<img class="no-border" src="/img/design_3/socials/windows.png" alt="">
</div>
<p>Download Desktop App</p>
<p>Download<br>Desktop App</p>
</div>
</a>
<a class="apple-store-btn hidden" href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img src="/img/new/apple_store.svg"></a>
@@ -97,7 +97,7 @@ active_home: true
<a class="box-btn btn-1" title="{{ 'index-security-review-2022-title' | i18n({}, lang) }}" href="/blog/20221108-simplex-chat-v4.2-security-audit-new-website.html">
2022
</a>
<a class="box-btn btn-2" title="{{ 'index-security-review-2024-title' | i18n({}, lang) }}" href="/blog/20241014-simplex-network-v6-1-security-review-better-calls-user-experience.html">
<a class="box-btn gold-gradient" title="{{ 'index-security-review-2024-title' | i18n({}, lang) }}" href="/blog/20241014-simplex-network-v6-1-security-review-better-calls-user-experience.html">
2024
</a>
<p class="security-audits">
@@ -109,13 +109,13 @@ active_home: true
<img src="/img/design_3/publications/privacy-guides.png" alt="Privacy Guides">
</a>
<a title="{{ 'index-publications-whonix-title' | i18n({}, lang) }}" href="https://www.whonix.org/wiki/Chat#Recommendation" target="_blank">
<img src="/img/design_3/publications/whonix.png" alt="Whonix">
<img src="/img/design_3/publications/whonix.png" alt="Whonix" class="whonix">
</a>
<a title="{{ 'index-publications-heise-title' | i18n({}, lang) }}" href="https://www.heise.de/suche/?q=simplex+chat&sort_by=date&rm=search" target="_blank">
<img src="/img/design_3/publications/heise.png" alt="Heise">
</a>
<a title="{{ 'index-publications-kuketz-title' | i18n({}, lang) }}" href="https://www.kuketz-blog.de/simplex-eindruecke-vom-messenger-ohne-identifier/" target="_blank">
<img src="/img/design_3/publications/kuketz-blog.png" alt="Kuketz Blog">
<img src="/img/design_3/publications/kuketz-blog.png" alt="Kuketz Blog" class="kuketz">
</a>
<a title="{{ 'index-publications-optout-title' | i18n({}, lang) }}" href="https://optoutpod.com/episodes/s3e02-simplexchat/" target="_blank">
<img src="/img/design_3/publications/optout.png" alt="Opt Out">
@@ -342,7 +342,7 @@ active_home: true
scheduleUpdate(); // Initial update
} else {
// Fallback for older browsers
['scroll','resize','load'].forEach(ev =>
['scroll','resize','load'].forEach(ev =>
window.addEventListener(ev, scheduleUpdate, { passive: true })
);
scheduleUpdate();
+8 -2
View File
@@ -5,7 +5,13 @@ const isMobile = {
};
(function() {
document.addEventListener('DOMContentLoaded', () => {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializePage);
} else {
initializePage();
}
function initializePage() {
const googlePlayBtn = document.querySelector('.google-play-btn');
const appleStoreBtn = document.querySelector('.apple-store-btn');
const fDroidBtn = document.querySelector('.f-droid-btn');
@@ -35,7 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
showPromotedGroups();
});
}
async function showPromotedGroups() {
welcome();