update responsivity

This commit is contained in:
tree🌴 2023-11-24 08:09:18 +01:00
parent 6c784c5a49
commit 8179bfa215
4 changed files with 115 additions and 46 deletions

View file

@ -4,6 +4,11 @@ links:
manifesto: https://docs.web3privacy.info/manifesto
github: https://github.com/web3privacy
twitter: https://twitter.com/web3privacy
matrix: https://matrix.web3privacy.info
bluesky: https://bsky.app/profile/web3privacy.info
mirror: https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/
youtube: https://youtube.com/@Web3PrivacyNow/
forum: https://forum.web3privacy.info
header:
menu:
- name: Home
@ -19,19 +24,28 @@ header:
#- name: Leaderboard
# url: /leaderboard
- name: Docs
url: https://docs.web3privacy.info
link: docs
#- name: Manifesto
# url: /manifesto
rightMenu:
- twitter
- telegram
- github
- matrix
footer:
menu:
- title: "@web3privacy"
ico: twitter
url: https://twitter.com/web3privacy
link: twitter
- title: Telegram
ico: telegram
link: telegram
- title: GitHub
ico: github
url: https://github.com/web3privacy
link: github
- title: Matrix
url: https://matrix.web3privacy.info
ico: matrix
link: matrix
hero:
text: |
Privacy advocates worldwide are coming together to discuss how to mainstream privacy within the Web3 industry. So it will become a cultural phenomenon embodying both decentralisation & anti-surveillance capitalism practices.
@ -54,31 +68,40 @@ landing:
- Human rights DAO
follow:
- name: "@web3privacy"
url: https://twitter.com/web3privacy
link: twitter
text: 800+ followers
ico: twitter
- name: "@web3privacy.info"
url: https://bsky.app/profile/web3privacy.info
text: Bluesky
#- name: "@web3privacy.info"
# link: bluesky
# text: Bluesky
# ico: bluesky
- name: Telegram
link: telegram
text: Telegram group
ico: telegram
- name: Mirror
url: https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/
link: mirror
text: Articles, reports, etc.
ico: mirror
- name: YouTube
url: https://youtube.com/@Web3PrivacyNow/
link: youtube
text: Videos
ico: youtube
coord:
- name: Documentation
url: https://docs.web3privacy.info
link: docs
text: About our initiative
ico: docs
- name: GitHub
url: https://github.com/web3privacy
link: github
text: Source-code repositories
ico: github
- name: Matrix
url: https://matrix.web3privacy.info
link: matrix
text: Real-time communication
ico: matrix
- name: Forum
url: https://forum.web3privacy.info
link: forum
text: Community discussion
ico: forum
community: |

View file

@ -40,7 +40,7 @@ import cfonts from 'cfonts';
<div class="w-full">
{config.header.menu.map((menuItem) => (
<div class="uppercase w-full">
<a href={menuItem.url} class="inline-block hover:underline px-4 py-2" class:list={[menuItem.url.match(/^http/) ? "external" : "", Astro.url.pathname === menuItem.url ? "text-white" : ""]} target={menuItem.url.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a>
<a href={menuItem.url || config.links} class="inline-block hover:underline px-4 py-2" class:list={[menuItem.url?.match(/^http/) ? "external" : "", Astro.url.pathname === menuItem.url ? "text-white" : ""]} target={menuItem.url?.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a>
</div>
))}
</div>
@ -50,26 +50,26 @@ import cfonts from 'cfonts';
<div class="mr-4 lg:hidden">
<div class="hamburger"></div>
</div>
<div class="w-40">
<img src="/logo.svg" class:list={["w-40", banner ? "hidden" : "block"]} onclick="location.href='/'" />
<a href="/" class="w3pn-logo" class:list={["w-32 lg:w-40", banner ? "hidden" : "block"]}></a>
</div>
<div class="hidden lg:flex gap-2 ml-10">
<div class="hidden lg:flex grow gap-0 xl:gap-2 justify-center">
{config.header.menu.map((menuItem) => (
<div class="uppercase" class:list={[menuItem.url.match(/^http/) ? "external" : "", Astro.url.pathname === menuItem.url ? "text-white" : ""]}>
<a href={menuItem.url} class="inline-block hover:underline px-4 py-2" target={menuItem.url.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a>
<div class="uppercase hover:text-[#c2c2c2]" class:list={[menuItem.link ? "external" : "", Astro.url.pathname === menuItem.url ? "text-white" : ""]}>
<a href={config.links[menuItem.link] || menuItem.url} class="inline-block hover:underline px-4 py-2" target={menuItem.link ? '_blank' : '_self'}>{menuItem.name}</a>
</div>
))}
</div>
<div class="grow flex gap-6 justify-end lg:pt-2">
<a href={config.links.github} class="block icon github small opacity-50 hover:opacity-100" target="_blank"></a>
<a href={config.links.twitter} class="block icon twitter small opacity-50 hover:opacity-100" target="_blank"></a>
<div class="flex grow lg:grow-0 gap-3 lg:gap-6 justify-end pt-1 lg:pt-2.5">
{config.header.rightMenu.map((key) => (
<a href={config.links[key]} class="block icon xsmall sm:small opacity-50 hover:opacity-100" class:list={[key]} target="_blank"></a>
))}
</div>
</header>
{banner &&
<div class="w-full h-full flex mt-20 sm:mt-32 middle-pane-medium">
<div>
<img src="/logo.svg" class="w-64 sm:w-72 lg:w-80 xl:w-96" />
<div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96"></div>
<div class="text-left mt-10">
{config.hero.text}
</div>
@ -90,19 +90,21 @@ import cfonts from 'cfonts';
<div class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10">
<div class="middle-pane-big">
<div class="flex gap-10 text-lg items-center flex-wrap" id="footerMenu">
<div class="grow">
<img src="/logo.svg" class="w-44" />
</div>
<div class="flex gap-10 text-lg items-center flex-wrap align-top" id="footerMenu">
<a href="/" class="w3pn-logo w-32"></a>
<div class="grow flex justify-end">
<div class="lg:flex justify-center flex-wrap gap-4 lg:gap-10">
{config.footer.menu.map((item) => (
<div class="flex gap-4 items-center menuItem">
<div class="flex gap-4 items-center menuItem lg:mb-0 mb-2">
<div class="icon small opacity-50" class:list={[item.ico]}></div>
<div class="text-white hover:underline"><a href={item.url}>{item.title}</a></div>
<div class="text-white hover:underline"><a href={item.url || config.links[item.link]}>{item.title}</a></div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
<script>
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');

View file

@ -39,11 +39,11 @@ import contributors from '../contributors.json';
<h1>Follow us</h1>
<div class="w3pn-wgrid">
{config.landing.follow.map((item) => (
<div>
<div><div class="icon" class:list={[item.ico || ""]}></div></div>
<div class="title"><a href={item.url} target="_blank">{item.name}</a></div>
<div>{item.text}</div>
</div>
<a href={item.url || config.links[item.link]} target="_blank">
<span><span class="icon" class:list={[item.ico || ""]}></span></span>
<span class="title">{item.name}</span>
<span>{item.text}</span>
</a>
))}
</div>
</div>
@ -51,11 +51,11 @@ import contributors from '../contributors.json';
<h1>Coordination</h1>
<div class="w3pn-wgrid">
{config.landing.coord.map((item) => (
<div>
<div><div class="icon" class:list={[item.ico || ""]}></div></div>
<div class="title"><a href={item.url} target="_blank">{item.name}</a></div>
<div>{item.text}</div>
</div>
<a href={item.url || config.links[item.link]} target="_blank">
<span><span class="icon" class:list={[item.ico || ""]}></span></span>
<span class="title">{item.name}</span>
<span>{item.text}</span>
</a>
))}
</div>
</div>
@ -77,5 +77,4 @@ import contributors from '../contributors.json';
</div>
</div>
</div>
</BaseLayout>

File diff suppressed because one or more lines are too long