dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-04-26 19:35:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

add navigation

Browse Source
This commit is contained in:
M Sarmad Qadeer
2022-08-18 21:21:49 +05:00
parent 1c22af4846
commit 285e2dac45
8 changed files with 135 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/_includes/layouts/article.html
+16 -3
View File
@@ -16,9 +16,17 @@
<body class="sm:bg-gray-100">
<header>
<nav class="container">
<a href="/">
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
</a>
<div class="flex items-center gap-4 h-full">
<a href="/">
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
</a>
<div class="hidden lg:flex rounded gap-[1px]">
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
</div>
<div class="nav__buttons">
<div class="github">
@@ -32,6 +40,11 @@
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px]">
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
<section class="container">
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20">{{ content | safe }}</div>
website/src/blog.html
+20 -3
View File
@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/tailwind.css" rel="stylesheet" />
<link href="/css/blogs.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet" />
<title>Blogs</title>
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico">
<script async defer src="https://buttons.github.io/buttons.js"></script>
@@ -13,9 +14,17 @@
<body class="bg-gray-100">
<header>
<nav class="container">
<a href="/">
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
</a>
<div class="flex items-center gap-4 h-full">
<a href="/">
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
</a>
<div class="hidden lg:flex rounded gap-[1px]">
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
</div>
<div class="nav__buttons">
<div class="github">
@@ -35,6 +44,12 @@
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px]">
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
<section class="container">
{% for blog in collections.blogs %}
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
@@ -65,5 +80,7 @@
</div>
</div>
</footer>
<script async defer src="/js/script.js"></script>
</body>
</html>
website/src/contact/index.html
+6
View File
@@ -14,6 +14,7 @@
<meta name="Content-Type" content="text/html;charset=utf-8" />
<meta name="twitter:card" content="summary" />
<link href="../css/contact.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
<script src="qrcode.js"></script>
<script async defer src="index.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
@@ -44,6 +45,11 @@
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px]">
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
<section id="conn_req">
<div class="container">
website/src/css/blog.css
+13
View File
@@ -74,3 +74,16 @@ h3::before {
visibility: hidden;
pointer-events: none;
}
@media screen and (max-width: 1024px) {
h1::before,
h2::before,
h3::before {
display: block;
content: " ";
margin-top: -125px;
height: 125px;
visibility: hidden;
pointer-events: none;
}
}
website/src/css/style.css
+34
View File
@@ -0,0 +1,34 @@
html {
scroll-behavior: smooth;
}
h1::before,
h2::before,
h3::before
#comparison::before {
display: block;
content: " ";
margin-top: -80px;
height: 100px;
visibility: hidden;
pointer-events: none;
}
@media screen and (max-width: 1024px) {
h1::before,
h2::before,
h3::before
#comparison::before {
display: block;
content: " ";
margin-top: -125px;
height: 205px;
visibility: hidden;
pointer-events: none;
}
}
.nav-button-active{
background-color: #00C8FB;
color: #fff;
}
website/src/index.html
+21 -4
View File
@@ -19,6 +19,8 @@
<meta property="og:url" content="https://simplex.chat/" />
<meta property="og:image" content="https://simplex.chat/img/share_simplex.png" />
<meta name="twitter:card" content="summary" />
<link href="/css/tailwind.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico">
<script async defer src="js/index.js"></script>
@@ -28,9 +30,17 @@
<body>
<header>
<nav class="container">
<a href="/">
<img alt="simplex logo" class="logo" src="img/simplex.svg" />
</a>
<div class="flex items-center gap-4 h-full">
<a href="/">
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
</a>
<div class="hidden lg:flex rounded gap-[1px] bg-white">
<a class="text-gray-800 tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="text-gray-800 tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="text-gray-800 tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
</div>
<div class="nav__buttons">
<div class="github">
@@ -50,8 +60,13 @@
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#FCD561]">
<a class="flex-1 flex justify-center text-gray-800 bg-[#FCD561] tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="flex-1 flex justify-center text-gray-800 bg-[#FCD561] tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-gray-800 bg-[#FCD561] tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
<section id="demo">
<section id="demo" class="z-10">
<div class="container">
<h1>SimpleX Chat</h1>
<h3>Private & encrypted - the only platform without user identifiers!</h3>
@@ -443,6 +458,8 @@
</div>
</div>
</footer>
<script async defer src="js/script.js"></script>
</body>
</html>
website/src/invitation/index.html
+17 -3
View File
@@ -15,6 +15,7 @@
<meta name="twitter:card" content="summary" />
<link href="../css/contact.css" rel="stylesheet" />
<script src="../contact/qrcode.js"></script>
<link href="../css/style.css" rel="stylesheet" />
<script async defer src="../contact/index.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
@@ -22,9 +23,17 @@
<body>
<header>
<nav class="container">
<a href="/">
<img alt="simplex logo" class="logo" src="../img/simplex.svg" />
</a>
<div class="flex items-center gap-4 h-full">
<a href="/">
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
</a>
<div class="hidden lg:flex rounded gap-[1px]">
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-1 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
</div>
<div class="nav__buttons">
<div class="github">
@@ -44,6 +53,11 @@
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px]">
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 white-paper-nav-btn" href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-gray-800 bg-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-solid border-gray-300 blog-nav-btn" href="/blog">Blog</a>
</div>
<section id="conn_req">
<div class="container">
website/src/js/script.js
+8
View File
@@ -0,0 +1,8 @@
console.log(window.location.href)
if(window.location.href.includes('comparison')){
console.log('Comparison');
document.querySelector('.comparison-nav-btn').classList.add('nav-button-active');
}
else if(window.location.href.includes('blog')){
document.querySelector('.blog-nav-btn').classList.add('nav-button-active');
}