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

change desktop header style

Browse Source
This commit is contained in:
M Sarmad Qadeer
2022-08-19 17:00:18 +05:00
parent 445fa5669e
commit 585b17db99
9 changed files with 52 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
website/src/_includes/layouts/article.html
View File

@@ -14,37 +14,7 @@
</head>
<body class="sm:bg-gray-100">
<header>
<nav class="container">
<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">
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
</div>
<div class="donate d-none-576">
<a href="https://opencollective.com/simplex-chat" target="_blank"> <span class="button">Donate</span></a>
</div>
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#00C8FB]">
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] 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-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-x-[2px] border-y-0 border-solid border-white comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] blog-nav-btn" href="/blog">Blog</a>
</div>
{% include "nav.html" %}
<section class="container">
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20">{{ content | safe }}</div>

36
website/src/_includes/nav.html Normal file
View File

@@ -0,0 +1,36 @@
<header>
<nav class="container">
<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 gap-4">
<a class="tracking-[1px] rounded white-paper-nav-btn"
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="tracking-[1px] rounded comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="tracking-[1px] rounded blog-nav-btn" href="/blog">Blog</a>
</div>
</div>
<div class="nav__buttons">
<div class="github">
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
</div>
<div class="donate d-none-576">
<a href="https://opencollective.com/simplex-chat" target="_blank">
<span class="button">Donate</span></a>
</div>
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#00C8FB]">
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] 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-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-x-[2px] border-y-0 border-solid border-white comparison-nav-btn"
href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] blog-nav-btn"
href="/blog">Blog</a>
</div>

40
website/src/blog.html
View File

@@ -12,43 +12,7 @@
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body class="bg-gray-100">
<header>
<nav class="container">
<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">
<a
class="github-button"
href="https://github.com/simplex-chat/simplex-chat"
data-size="large"
data-show-count="true"
aria-label="Star simplex-chat on GitHub"
>Star</a>
</div>
<div class="donate d-none-576">
<a href="https://opencollective.com/simplex-chat" target="_blank">
<span class="button">Donate</span></a>
</div>
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#00C8FB]">
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] 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-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-x-[2px] border-y-0 border-solid border-white comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] blog-nav-btn" href="/blog">Blog</a>
</div>
{% include "nav.html" %}
<section class="container">
{% for blog in collections.blogs %}
@@ -80,7 +44,5 @@
</div>
</div>
</footer>
<script async defer src="/js/script.js"></script>
</body>
</html>

30
website/src/contact/index.html
View File

@@ -21,35 +21,7 @@
</head>
<body>
<header>
<nav class="container">
<a href="/">
<img alt="simplex logo" class="logo" src="../img/simplex.svg" />
</a>
<div class="nav__buttons">
<div class="github">
<a
class="github-button"
href="https://github.com/simplex-chat/simplex-chat"
data-size="large"
data-show-count="true"
aria-label="Star simplex-chat on GitHub"
>Star</a>
</div>
<div class="donate d-none-576">
<a href="https://opencollective.com/simplex-chat" target="_blank">
<span class="button">Donate</span></a>
</div>
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#00C8FB]">
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] 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-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-x-[2px] border-y-0 border-solid border-white comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] blog-nav-btn" href="/blog">Blog</a>
</div>
{% include "nav.html" %}
<section id="conn_req">
<div class="container">

13
website/src/css/blog.css
View File

@@ -73,17 +73,4 @@ h3::before {
height: 80px;
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;
}
}

20
website/src/css/style.css
View File

@@ -4,7 +4,7 @@ html {
h1::before,
h2::before,
h3::before
h3::before,
#comparison::before {
display: block;
content: " ";
@@ -14,21 +14,7 @@ h3::before
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{
/* .nav-button-active{
background-color: #00C8FB;
color: #fff;
}
} */

40
website/src/index.html
View File

@@ -28,43 +28,7 @@
</head>
<body>
<header>
<nav class="container">
<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">
<a
class="github-button"
href="https://github.com/simplex-chat/simplex-chat"
data-size="large"
data-show-count="true"
aria-label="Star simplex-chat on GitHub"
>Star</a>
</div>
<div class="donate d-none-576">
<a href="https://opencollective.com/simplex-chat" target="_blank">
<span class="button">Donate</span></a>
</div>
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#00C8FB]">
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] 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-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-x-[2px] border-y-0 border-solid border-white comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] blog-nav-btn" href="/blog">Blog</a>
</div>
{% include "nav.html" %}
<section id="demo" class="z-10">
<div class="container">
@@ -458,8 +422,6 @@
</div>
</div>
</footer>
<script async defer src="js/script.js"></script>
</body>
</html>

38
website/src/invitation/index.html
View File

@@ -21,43 +21,7 @@
</head>
<body>
<header>
<nav class="container">
<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">
<a
class="github-button"
href="https://github.com/simplex-chat/simplex-chat"
data-size="large"
data-show-count="true"
aria-label="Star simplex-chat on GitHub"
>Star</a>
</div>
<div class="donate d-none-576">
<a href="https://opencollective.com/simplex-chat" target="_blank">
<span class="button">Donate</span></a>
</div>
</div>
</nav>
</header>
<div class="flex lg:hidden w-full sticky top-[62px] z-[99] bg-[#00C8FB]">
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] 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-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] border-x-[2px] border-y-0 border-solid border-white comparison-nav-btn" href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-white tracking-[1px] font-medium text-base px-3 py-2 rounded hover:bg-[#00C8FB] hover:text-white border-[1px] blog-nav-btn" href="/blog">Blog</a>
</div>
{% include "nav.html" %}
<section id="conn_req">
<div class="container">

16
website/src/js/script.js
View File

@@ -1,8 +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');
}
// 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');
// }