web3privacy/web
1
0
Fork 0
mirror of https://github.com/web3privacy/web synced 2024-10-15 18:26:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

responsivity

Browse source
This commit is contained in:
tree🌴 2023-11-13 04:07:21 +01:00
parent fdd0bf0135
commit f03642658a
3 changed files with 54 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/layouts/base.astro
View file

@ -36,15 +36,24 @@ import cfonts from 'cfonts';
/> />
</head> </head>
<body class="bg-black text-white"> <body class="bg-black text-white">
<div class="nav-links">
{config.header.menu.map((menuItem) => (
<a href={menuItem.url} class="inline-block hover:underline px-4 py-2" target={menuItem.url.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a>
))}
</div>
<div class="w-full z-10" class:list={[banner ? "h-[600px]" : "pb-6"]} id={banner ? "intro" : "no-intro"}> <div class="w-full z-10" class:list={[banner ? "h-[600px]" : "pb-6"]} id={banner ? "intro" : "no-intro"}>
<header class="flex pt-6 middle-pane-big"> <header class="flex pt-6 middle-pane-big">
<div class="w-40"> <div class="mr-4 lg:hidden">
<div class="hamburger"></div>
</div>
<div class="w-32 lg:w-40">
<img src="/logo.svg" class:list={["w-40", banner ? "hidden" : "block"]} /> <img src="/logo.svg" class:list={["w-40", banner ? "hidden" : "block"]} />
</div> </div>
<div class="flex gap-8 mt-2 ml-10"> <div class="hidden lg:flex gap-2 ml-10">
{config.header.menu.map((menuItem) => ( {config.header.menu.map((menuItem) => (
<div class="uppercase hover:underline" class:list={[menuItem.url.match(/^http/) ? "external" : "", Astro.url.pathname === menuItem.url ? "text-white" : ""]}> <div class="uppercase" class:list={[menuItem.url.match(/^http/) ? "external" : "", Astro.url.pathname === menuItem.url ? "text-white" : ""]}>
<a href={menuItem.url} class="" target={menuItem.url.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a> <a href={menuItem.url} class="inline-block hover:underline px-4 py-2" target={menuItem.url.match(/^http/) ? '_blank' : '_self'}>{menuItem.name}</a>
</div> </div>
))} ))}
</div> </div>
@ -73,7 +82,7 @@ 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="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="middle-pane-big">
<div class="flex gap-10 text-lg items-center" id="footerMenu"> <div class="flex gap-10 text-lg items-center flex-wrap" id="footerMenu">
<div class="grow"> <div class="grow">
<img src="/logo.svg" class="w-44" /> <img src="/logo.svg" class="w-44" />
</div> </div>
@ -86,5 +95,10 @@ import cfonts from 'cfonts';
</div> </div>
</div> </div>
</div> </div>
<script>
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
});
</script>
</body> </body>
</html> </html>

2
src/pages/index.astro
View file

@ -70,7 +70,7 @@ import contributors from '../contributors.json';
))} ))}
</div> </div>
<div class="flex gap-10 pt-4"> <div class="flex gap-4 lg:gap-10 pt-4 flex-wrap">
<a href="" class="button inverted"><button>Enter the community</button></a> <a href="" class="button inverted"><button>Enter the community</button></a>
<a href="" class="button inverted"><button>Become the contributor</button></a> <a href="" class="button inverted"><button>Become the contributor</button></a>
<a href="" class="button inverted"><button>Become the partner</button></a> <a href="" class="button inverted"><button>Become the partner</button></a>

34
src/styles/base.css
View file

@ -136,4 +136,38 @@
#footerMenu .menuItem:hover .icon { #footerMenu .menuItem:hover .icon {
@apply opacity-100; @apply opacity-100;
} }
.hamburger {
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_1327_1074" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_1327_1074)"><path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="white"/></g></svg>');
}
}
.nav-links {
width: 100%;
top: 5rem;
left: 48px;
background-color: #ff9776;
display: none;
margin: 0;
}
.nav-links a {
display: block;
text-align: center;
padding: 10px 0;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
}
.nav-links a:hover, a:focus {
background-color: white;
text-color: black;
}
.expanded {
display: unset;
} }